Firefox CSS question: putting navbar at top of browser, in line with Menu bar
Hello. Before the "proton" update to the Firefox UI, I had nicely saved space in my browser by putting the navbar up on the same level with the menu bar which is able to make the UI area of Firefox take up less vertical space on my screen. Proton broke this however, so I reverted.
What sort of userchrome.css code do I now need to use in order to put the menu bar and navbar on the same level, like the attached image?
Chosen solution
Placing the tab bar at the bottom would happen if the #navigator-toolbo{position: relative !important;} rule is missing or not working.
Do you have a @namespace line in your userChrome.css file as this is not required as there is also the (x)html namespace used ? @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
You can try to replace :root with *|*:root in case there is a namespace issue.
Read this answer in context 👍 0All Replies (11)
The old code I have in my userchrome.css that used to work is this:
/* URL bar on same level as Menu Bar */
:root{ --uc-navbar-height: 32px; }
#TabsToolbar{-moz-box-ordinal-group: 2;}
#toolbar-menubar{
height: var(--uc-navbar-height);
background-color: var(--toolbar-bgcolor);
}
#nav-bar{
padding-right: 144px;
margin-top: calc(var(--uc-navbar-height) * -1);
margin-left: 300px;
background-color: transparent !important;
}
The #nav-bar section still adds right padding of 144px and a left margin of 300px but they now get separated, like the attached image with Firefox v91.
Modified by zach.heise
You can try to ask this at the Firefox CSS subreddit forum if the below posted code isn't working for you.
I can make it work if I add some code to move the tab bar to the lower position as the menu bar and the tab bar are in the same #titlebar container.
/* URL bar on same level as Menu Bar */
*|*:root{
--uc-navbar-height: 32px;
--uc-navbar-padding-right: 110px;
--uc-navbar-margin-left: 380px;
}
#toolbar-menubar{
height: var(--uc-navbar-height) !important;
background-color: var(--toolbar-bgcolor) !important;
}
*|*:root:not([inFullscreen="true"])
#nav-bar{
padding-right: var(--uc-navbar-padding-right) !important;
margin-top: calc(var(--uc-navbar-height) * -1);
margin-left: var(--uc-navbar-margin-left) !important;
background-color: transparent !important;
}
/* Tabs below Navigation Toolbar */
/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: calc(var(--tab-min-height) + 1px) !important;
position: relative !important;
}
/* TABS: POSITION APPEARANCE */
#tabbrowser-tabs {
width: 100vw !important;
}
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
#TabsToolbar .titlebar-buttonbox-container {
display: none !important;
}
Modified by cor-el
Oh my gosh - your screenshot you attached is exactly what I'm looking for!! It's so good to know it is possible!
But unfortunately, replacing my entire userchrome.css file with the code you posted didn't quite do the trick. It's definitely an improvement in terms of making the padding tighter and take up less space! And I like what you did with the tabs. (attachment below)
I did already ask on that subreddit about 5 months ago but no one had the answer. You've already shown its possible to do; I was worried that Mozilla had removed the capability entirely.
I wonder what could be different about your userchrome.css vs mine. Is there anything else you have in your file that might be contributing? What version of FF are you on? This screenshot was taken on 91.5 ESR but I'm happy to stop using the ESR if it means I could get the navbar in line with the menu bar like you've done.
Modified by zach.heise
I've never used the Browser Toolbox before - is that something I would need to turn on in order to do this? Is that how you were able to figure out the right CSS so quickly?
I've updated the above posted code to fix a typo in --uc-navbar-padding-right: 110px; (lost a '1') and make it work in full screen mode.
The Browser Toolbox allows to inspect the browser user interface to see what CSS rules are applied and try out CSS code in case you need to make small adjustments to a padding or margin value or simply disable a rule.
To enable the Browser Toolbox, see:
- select "Enable remote debugging" in the Web Developer Tools settings
- https://developer.mozilla.org/en-US/docs/Tools/Settings
The code I posted above previously was for the case with the title bar hidden as that requires to reserve space for the window control buttons via a padding-right.
You can give the currently above posted code another try. With the title bar visible you can set --uc-navbar-padding-right:0px; as in tha case the control buttons are on the title bar.
Hello again! Thanks so much for helping me out with this. I replaced the original code you provided entirely with the new version and it seems to have done something odd... it's put the tab bar on the bottom of the entire browser window, and it only shows 1 tab at a time. That's a new one.
And unfortunately, the menu bar and nav bar are still on separate lines.
This is all very surprising for me; I would have thought a userchrome file that worked for you, would work exactly the same way for me (provided we are using the Proton UI at least). Yet it seems what you are seeing and what I see are completely different!
Oh and yes - for space saving, I also always hide the title bar. My goal is 3 bars: combined menu + navbar + search, then bookmarks bar, then tabs on the bottom. It's been my UI in firefox for 15 years now and I'm really hoping I don't have to change, heh.
Chosen Solution
Placing the tab bar at the bottom would happen if the #navigator-toolbo{position: relative !important;} rule is missing or not working.
Do you have a @namespace line in your userChrome.css file as this is not required as there is also the (x)html namespace used ? @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
You can try to replace :root with *|*:root in case there is a namespace issue.
You wonderful person! That did it - deleting that namespace line did the trick! I always thought we needed that line for userchrome to even work at all. But now apparently it's not only unnecessary but having it will actually hurt userchrome theming?? I had no idea!
The only edit I needed to make was to change --uc-navbar-margin-left: 300px; because otherwise there was a huge gap between the word "Help" and the back arrow button. That was a pretty easy edit. though.
You are truly a firefox savior. Do you have a paypal or something? I'd love to send you $10 to buy you a beer. Seriously, you did all that so fast and thoroughly - I'm super grateful!
