Address Bar at very top

[travward]

Anybody know a way to move the address bar to the top, adjacent to the vivaldi menu button?

[retoree]

@travward like this?

[travward]

@retoree Yes! How?

[retoree]

@travward give me some time, I'll try to fix all bugs. And if I success, I'll reply you again.

[luetage]

@retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.

[retoree]

@luetage I use native hamburger menu button since 1.13. Yes, I surely will do it someday

[retoree]

@travward and it's done. I saved some time for myself so this code will only work with tabs and address bar on top. Oh and this is for Windows 10. If you're on another OS it may not work as you expected. If so, I'm sorry, but I can't help Also, this code do not include any other modifications I made for myself, so it will not looks like on screenshot above. Anyway it should looks native on Win10.
Let's get started. First, read this guides, they will help you to apply the code:
https://forum.vivaldi.net/topic/10549/modding-vivaldi/
https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/
Here the code:

/* Address Bar on Top */
#browser.address-top.tabs-top #titlebar,
#browser.address-top.tabs-off #titlebar {
    z-index: 1;
}
#browser.address-top.tabs-top .vivaldi,
#browser.address-top.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi),
#browser.address-top.tabs-off .vivaldi,
#browser.address-top.tabs-off #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: 34px!important;
}
#browser.address-top.tabs-top .vivaldi,
#browser.address-top.tabs-off .vivaldi {
    padding: 1px 0;
}
#browser.address-top.tabs-top #titlebar #pagetitle,
#browser.address-top.tabs-off #titlebar #pagetitle {
    display: none;
}
#browser.address-top.tabs-top #tabs-container.top {
    top: 34px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 1;
    padding-top: 0;
}
#browser.address-top.tabs-top #main {
    margin-top: -30px;
}
#browser.address-top.tabs-off #main {
    margin-top: -25px;
}
#browser.address-top.tabs-top .toolbar-addressbar {
    padding: 0 140px 30px 34px;
}
#browser.address-top.tabs-off .toolbar-addressbar {
    padding: 0 140px 0 34px;
}
.urlSearch, .dialog-add-bookmark, .extensionaction {
    z-index: 999999999999999999;
}

Ask me if you need help with this again or you didn't understand my bad English

[travward]

@retoree Wow, Thanks! I'll let you know if I have any questions. Thanks you!

[travward]

@retoree That worked! Thank you so much! Out of curiousity, does the custom.css file get blown away on updates? Or only the browser.html?

[retoree]

@travward they both will because the entire folder deleted on update.

[luetage]

@travward Your whole application gets replaced on update, this includes all changes and all files you add to it. But we have automatic batch scripts for all operating systems. if you use these, you are up and running in no time.

[travward]

@retoree Now... I know you said this only works for tabs on top, but if I want to have an 'F-Key' that toggle tabs visible/non-visible the address bar drops down to where it was originally. What is making this do that? What are the limitations. {BTW, I am kinda green when it comes to coding.}

[retoree]

@travward I updated the code in post above, try it.

[iAN CooG]

excellent, now that's the solution for those wanting the tab bar below the address bar.

[travward]

@retoree That's awesome. Thankyou!

[travward]

@retoree BTW, the drop-down from the address bar shows up behind the tabs.

[retoree]

@travward this is really suspiciously. I don't have this problem. How about extensions pop-up's? I updated the code in post above again.

[iAN CooG]

@retoree it's now ok like this for me, address bar drop down, search bar dropdown and extensions popups are all drawn over the tab bar. You're really good at this.

[travward]

@retoree Awesome! That did it.

[D0J0P]

@retoree Thank you! I've been wondering how to put the address bar below the tab bar, and now I can do it! Here's how mine looks so far . . .

Windows 10:

Linux(Elementary OS):

Linux(Elementary OS w/Vivaldi in Native Window mode):

Would there be a way to also place tab stack indicators at the bottom of tabs? How about a way to place the V button and window control buttons on the address bar in Native Window mode? That would be perfect when I'm using Linux!

I really love the way the address bar looks like on the top like with Safari, Brave, Midori/Epiphany, and the old FF. It just seems to make sense as it gives more screen real estate for the tab bar.

Thanks for your contributions!