Tabs Below Address Bar and Bookmark Bar
-
Thanks guys for all the work about the 5.3 version.
@eilegz I'd like the bookmark bar on top (under the address bar). With your CSS, it displays at the bottom (even if I go to Settings, bookmark). What I have to change in your CSS to display it under the address bar?
Thanks. -
I use the bookmark bar below the address bar and above the tabs and I've found this works for me on the latest stable version, I don't know if it helps.
/* top addressbar above top tabbar */ #header { padding-top: 26px; } .mainbar { position: fixed; top: 0px; padding-left: 40px; padding-right: 100px; width: 100%; z-index: 1 !important; } /* brings vivaldi button and win controls to front */ #browser.tabs-top #header { /* background-color: unset; */ backdrop-filter: unset; contain: unset; } #browser.tabs-top.address-top #main {overflow: visible;} #browser.tabs-top.address-top .toolbar-mainbar:after {display:none;} #browser.tabs-top.address-top .UrlBar {position: fixed; top:0px; left: 34px; right: 100px;} #browser.tabs-top.address-top.maximized:not(.tabs-at-edge) .UrlBar {top:7px;} #browser.tabs-top.address-top .UrlBar, #browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {background-color: transparent;} /* Tabbar Container */ #browser.tabs-top.address-top #tabs-tabbar-container > div {padding-left: 2px;} /* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;} #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;} #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;} /* horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu #header {padding-top:38px !important;} #browser.tabs-top.address-top.horizontal-menu .topmenu {transform: translateY(-38px); margin-bottom:0; color: var(--colorFg);} /* remove color for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu #titlebar {height: 58px !important; z-index:-1;} /* set 0 height for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu .UrlBar {top: 24px !important; left: 0; right: 0;} #browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {padding-top: 0;} /* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;}
-
I was able to use this with some tweaks to get like 95% of the way to where I need to be. Using:
/* Tabbar Container */ #browser.tabs-top.address-top #tabs-tabbar-container > div {padding-left: 2px; z-index: 0 !important;}
I was able to get the extensions menus working properly, letting me access it regardless of how many tabs I have open, but I don't have the top right windows buttons for maximize, minimize, and exit. Not a huge issue because I can just right click on the area to get the menu that has those options, but I figured I'd ask to see if anyone else has spotted a fix to make those display.
-
@Gidoran not sure why you are not seeing the windows buttons - playing with my css i cannot get rid of them - they are just there - post your code if you want
-
After more playing around with it, I found that it was this block that was causing the buttons to not be visible - they were rendering, just obscured by something.
/* brings vivaldi button and win controls to front */ #browser.tabs-top #header { /* background-color: unset; */ backdrop-filter: unset; contain: unset; }
The total code block I have at the moment which is working as intended is:
/* top addressbar above top tabbar */ #header { padding-top: 26px; } .mainbar { position: fixed; top: 24px; padding-left: 0px; padding-right: 0px; width: 100%; z-index: 1 !important; } #browser.tabs-top.address-top #main {overflow: visible;} #browser.tabs-top.address-top .toolbar-mainbar:after {display:none;} #browser.tabs-top.address-top .UrlBar {position: fixed; top:0px; left: 34px; right: 100px;} #browser.tabs-top.address-top.maximized:not(.tabs-at-edge) .UrlBar {top:7px;} #browser.tabs-top.address-top .UrlBar, #browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {background-color: transparent;} /* Tabbar Container */ #browser.tabs-top.address-top #tabs-tabbar-container > div {padding-left: 2px; z-index: 0 !important;} /* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;} #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;} #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;} /* horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu #header {padding-top:38px !important;} #browser.tabs-top.address-top.horizontal-menu .topmenu {transform: translateY(-38px); margin-bottom:0; color: var(--colorFg); z-index: 2 !important;} /* remove color for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu #titlebar {height: 58px !important; z-index:-1;} /* set 0 height for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu .UrlBar {top: 24px !important; left: 0; right: 0;} #browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {padding-top: 0;} /* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;} /* Remove line under address bar and extensions bar */ .address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after, .address-top .mainbar > .toolbar-mainbar:after { content: unset; }
Tabs are on bottom, bookmark bar above that, address bar above that flush with bookmark bar, extension menus are usable despite number of tabs, and no weird line under just the extension buttons.
Hopefully the block's helpful to other people - this is with tabs on top, bookmark bar visible and menu position set to horizontal. Not sure what other settings I have mucked with that might be relevant, unfortunately.
-
Guys, I have not updated yet (because several other mods don't work), but I'm fidling with a separate snapshot install and the code I was using before remains functional, all I had to do was replace all instances of ".UrlBar" with ".mainbar".
Here is the code I'm using (no titlebar at all for me, and on macOS), and a screenshot:
/*|||||||||||||||||||||||||||||||||| ||||TABS BELLOW ADDRES BAR|||||||||| ||||||||||||||||||||||||||||||||||*/ #main { position: unset !important; } /* top addressbar above top tabbar */ #browser.tabs-top.address-top #header { padding-top:42px; } #browser.tabs-top.address-top #titlebar { height:42px; background-color: var(--colorBg); color: var(--colorFg); } /* remove background & color for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top .color-behind-tabs-off #titlebar { background-color: #fff; color: var(--colorAccentFg); } /* remove this line for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.maximized:not(.tabs-at-edge) #titlebar { height:41px; } #browser.tabs-top.address-top .vivaldi { height:34px; top: unset; bottom:0; } #browser.tabs-top.address-top #main { overflow: visible; } #browser.tabs-top.address-top .toolbar-mainbar:after { display:none; } #browser.tabs-top.address-top .mainbar { position: fixed; top:2px; left: 34px; right: 0px; } #browser.tabs-top.address-top.maximized:not(.tabs-at-edge) .mainbar { top:7px; } #browser.tabs-top.address-top .mainbar, #browser.tabs-top.address-top .mainbar > div:not(.mainbar-AddressField):not(.mainbar-SearchField) { background-color: transparent; } /* optional: unify tabbar & addressbar color palette */ /.color-behind-tabs-off#browser.tabs-top.address-top .mainbar > div:not(.mainbar-AddressField):not(.mainbar-SearchField) { color: var(--colorImageFg, var(--colorFg)); } /.color-behind-tabs-on#browser.tabs-top.address-top .mainbar > div:not(.mainbar-AddressField):not(.mainbar-SearchField) { color: var(--colorImageFg, var(--colorAccentFg)); } #browser.tabs-top.address-top #tabs-tabbar-container > div { padding-left: 0px; } /* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;} #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;} #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;} /* horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu #header {padding-top:38px !important;} #browser.tabs-top.address-top.horizontal-menu .topmenu {transform: translateY(-38px); margin-bottom:0; color: var(--colorFg);} /* remove color for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu #titlebar {height: 58px !important; z-index:-1;} /* set 0 height for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu .mainbar {top: 24px !important; left: 0; right: 0;} #browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {padding-top: 0;} /* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;} /* option 1: classic top section window drag zone */ /* { height:46px; } /#browser.tabs-top.address-top.normal .mainbar { top:7px; } /#browser.tabs-top.address-top.normal .bookmark-bar { top:46px; } */ /* option 2: compact header, drag zone are all around addressbar */ #browser.tabs-top.address-top.normal #tabs-tabbar-container { padding-top: 0 !important; } .tab-header .title{ margin-right: 22px !important; justify-content: center !important; width: 100% !important; } .tab-position .tab .favicon{ filter: grayscale(100%) brightness(80%); } .tab-position .tab.active .favicon { filter: none !important; } .tab-position .tab { border-right: 1px solid #404040; } .tab-position .tab.active { border: none !important; } .button-popup { z-index: 1 !important; }
-
-
whats not perfect for you - the windows buttons are there but the navbar is too far to the right
change this
#browser.tabs-top.address-top .mainbar { position: fixed; top:2px; left: 34px; right: 0px; }
to this
#browser.tabs-top.address-top .mainbar { position: fixed; top:2px; left: 34px; right: 140px; }
and you have windows buttons
-
Thanks @adacom. With Gidoran code I have windows button. What does not work (even with @SallyK code) is when I have the left panel open (Download, RSS, whatever...) and it is always opened (I prefer like this) when I want to search an url among those which already exist in my history by opening the address bar, the left parts of the urls are hidden by the left panel which recovers the left part of those urls. And also, the search bar (for me on the right of the address bar) the first search engines (whatever it is) on the top list is not 'blinking' when I put the mouse on it and does not work.
-
Haven't got a fix for the search engine issue (I noticed much the same but haven't had a huge motive to fix it yet, I got used to shortcut commands to switch search engines) but I do have a fix for the left panel getting blocked.
Add in this snippet to your custom.css
#panels-container {z-index: 0 !important;}
With my extensive 90-ish seconds of testing it seems to solve the issue of it blocking the address bar history. If I discover something for the search engine selector being finicky I'll post it, but that one's a little harder to find the right CSS classes for - I'm a back end developer so front end CSS stuff is not my strong point.
-
Spotted the class I was trying to find. .SearchField nav.menu
If I set it to
.SearchField nav.menu {top:50px !important;}
Then I can select the first in the list, but it's shifted downward so that it doesn't appear to be connected to the search box. Additionally, if I shrink my window so that the bookmark bar has an actual bookmark underneath of the dropdown menu, the first element is selectable so it has something to do with the method of shifting tabs/bookmark bar around.
-
@Gidoran Thanks. It does not solve the blocking of the address bar history. NVM I can deal with it. Thanks for the second stuff, I'll look it for it.
-
I would like to have tabs at the bottom. Above them is a bookmarks bar. At the top is the address bar. Is this how it's supposed to work?
It doesn't work for me on version 5.3.2679.61.
Does it work for you? What exact code are you using? Can you post the full text of the css file? -
I'm using:
* top addressbar above top tabbar */ #header { padding-top: 26px; } .mainbar { position: fixed; top: 0px; padding-left: 40px; padding-right: 100px; width: 100%; z-index: 1 !important; } /* brings vivaldi button and win controls to front */ #browser.tabs-top #header { /* background-color: unset; */ backdrop-filter: unset; contain: unset; } #browser.tabs-top.address-top #main {overflow: visible;} #browser.tabs-top.address-top .toolbar-mainbar:after {display:none;} #browser.tabs-top.address-top .UrlBar {position: fixed; top:0px; left: 34px; right: 100px;} #browser.tabs-top.address-top.maximized:not(.tabs-at-edge) .UrlBar {top:7px;} #browser.tabs-top.address-top .UrlBar, #browser.tabs-top.address-top .UrlBar > div:not(.UrlBar-AddressField):not(.UrlBar-SearchField) {background-color: transparent;} /* Tabbar Container */ #browser.tabs-top.address-top #tabs-tabbar-container > div {padding-left: 2px;} /* Sets tabs to fill entire bar */ #tabs-tabbar-container.top { margin-left: 0px !important; margin-right: -90px !important; } /* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;} #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;} #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;} /* horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu #header {padding-top:38px !important;} #browser.tabs-top.address-top.horizontal-menu .topmenu {transform: translateY(-38px); margin-bottom:0; color: var(--colorFg);} /* remove color for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu #titlebar {height: 58px !important; z-index:-1;} /* set 0 height for unify tabbar & addressbar color palette */ #browser.tabs-top.address-top.horizontal-menu .UrlBar {top: 24px !important; left: 0; right: 0;} #browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container {padding-top: 0;} /* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;}
which worked well enough for me. But I think Vivaldi updated while I've been sick and in hospital recently, because now some of the positioning isn't quite right - a gap at the top of the tab bar, and the V icon is too low as well. I haven't had the chance to try tweaking to account for that.
It currently looks like this
-
I've fixed the gap at the top of the tab bar - the line that needs fixing in the code I posted first is the first one in the bottom section, change the size from 65px to 50px
/* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:50px;}
But I don't actually know which figure is affecting the V icon - if anyone knows how it's possible to push it up a bit, so it's centred in the area its in, I'd appreciate it.
-
@SallyK
play with this/* position of vivaldi icon */ button.vivaldi { height: 31px !important; width: 26px; /* 26 */ background: linear-gradient(#b1b1b1, #e1e1e1) !important; fill: red !important; top: -1px !important; } div
some of that is other changes but the 2 important lines are height and top as far as i remember
-
@adacom Thank you very much, I'll see what I can do.
-
Based off the current CSS @SallyK is using, I made a few tweaks.
The Vivaldi menu icon and window controls should be better centered in their height and the address bar dropdowns should appear above the tabs. I also tweaked some padding values and changed the background color to make the top bar look more unified, but not sure if that is something desired or not.
I also added a way to fully unify the colors of the top UI or have a distinction between the tab bar color and the rest of the UI. It can be acheived by
/* comment out */
or uncommenting the line:--unified: transparent;
near the top of the CSS.Unified Line Uncommented:
Unified Line Commented Out:
Known Bugs
The profile button popup doesn't seem to work. Didn't investigate too deeply.Edit: Fixed- Making the window narrow causes the window controls to overlap the address bar elements.
CSS
New CSS
#browser { --addressBarPaddingRight: 137px; --headerElementsHeight: 34px; --tabBarPaddingRightToSeeTrashAndSync: 92px; /* uncomment the line below to unify tab bar color with the address bar's */ --unified: transparent; --backgroundColor: var(--unified, var(--colorBg)); --backgroundColorAccent: var(--unified, var(--colorAccentBg)); } /* top addressbar above top tabbar */ #header { padding-top: 36px; } /* allows mainbar to be positioned absolute */ #main { overflow: unset; } .mainbar { position: absolute; top: -65px; padding-left: 34px; padding-right: var(--addressBarPaddingRight); width: 100%; z-index: 1 !important; } /* not sure if needed... */ /* brings vivaldi button and win controls to front */ #browser.tabs-top #header { backdrop-filter: unset; contain: unset; } #browser.tabs-top.address-top #main { overflow: visible; } /* Sets tabs to fill entire bar */ #tabs-tabbar-container.top { margin-left: 0px !important; margin-right: -90px !important; } #browser.tabs-top.address-top #tabs-tabbar-container > div { padding-left: 2px; } /* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header { padding-top: 65px; } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar { position: fixed; top: 34px; left: 0; right: 0; } #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar { top: 41px; } #browser.tabs-top.address-top.bookmark-bar-top .mainbar { transform: translateY(-30px); } /* horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu #header { --headerElementsHeight: 24px; } /* Make window controls same color as menu bar */ #browser.tabs-top.address-top.horizontal-menu .window-buttongroup { background-color: var(--colorTabBar); } #browser.tabs-top.address-top.horizontal-menu #header { padding-top: 38px !important; } #browser.tabs-top.address-top.horizontal-menu .topmenu { transform: translateY(-38px); margin-bottom: 0; color: var(--colorFg); } #browser.tabs-top.address-top.horizontal-menu #tabs-tabbar-container { padding-top: 0; } #browser.tabs-top.address-top.horizontal-menu .mainbar { padding: unset; transform: translateY(0px); } /* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header { padding-top: 65px !important; } #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu { transform: translateY(-65px); } #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar { top: 58px !important; } #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .mainbar { padding: unset; transform: translateY(-30px); } /* ---------------------------- */ /* New Stuff */ /* ---------------------------- */ /* Shrink height of all the window action buttons */ .window-buttongroup button.window-minimize, .window-buttongroup button.window-maximize, .window-buttongroup button.window-close { height: var(--headerElementsHeight) !important; } /* Shrink height of Vivaldi menu button */ #titlebar button.vivaldi { height: var(--headerElementsHeight) !important; padding-top: 0; } /* Remove empty space to the right of tabs and above tabs*/ #tabs-container { padding-right: var(--tabBarPaddingRightToSeeTrashAndSync) !important; } #tabs-tabbar-container.top { padding-top: unset !important; } /* Make other title bar elements have the same color as the address bar elements */ #titlebar button.vivaldi, .window-buttongroup { background-color: var(--backgroundColor); } .color-behind-tabs-off #titlebar button.vivaldi, .color-behind-tabs-off .window-buttongroup { background-color: var(--backgroundColorAccent); } .toolbar-mainbar .toolbar-extensions, .toolbar-mainbar { background-color: var(--backgroundColor); } .color-behind-tabs-off .toolbar-mainbar .toolbar-extensions, .color-behind-tabs-off .toolbar-mainbar { background-color: var(--backgroundColorAccent); } /* Fix tabs showing above address bar and search dropdowns */ #tabs-tabbar-container.top { z-index: 0; } /* Remove line under address bar and extensions bar */ .address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after, .address-top .mainbar > .toolbar-mainbar:after { content: unset; }
-
@nomadic Thanks again for your professional work.
-
@nomadic said in Tabs Below Address Bar and Bookmark Bar:
#browser.tabs-top.address-top.horizontal-menu .UrlBar {
top: 24px !important;
left: 0;
right: 0;
}Just scan through the code once & I noticed
.UrlBar
? I though it's obsolete?