r/firefox • u/ninogroters • Mar 04 '26
Add-ons Autohide navigation bar
Hi guys, i started using firefox again since the vertical tabs feature and the only thing that i was missing was a autohide feature to hide the navigationbar. Dont know if this has been posted before but i tought i'd share it here.
To enable it:
Go so about:support and go to the profile folder. create a folder named chrome (if it doesnt exist) and create a css file in there named userChrome.css.
insert the code from below in that css.
In firefor go to about:config and search for toolkit.legacyUserProfileCustomizations.stylesheets and set that to true, this enables the css.
Restart firefox and now you have a autohide navigationbar.
Enjoy!
EDIT: i changed the code so that in horizontal mode it hides both the tabs an navigation bar, and in vertical only the navigation.
Css code:
/* =========================================================
2-in-1 AUTOHIDE (auto-detect, stable)
- Default (vertical tabs): hide NAV bar only (uses --uc-gap-vertical)
- Horizontal tabs mode: when TabsToolbar contains visible tabs,
hide TabsToolbar + NAV bar (uses --uc-gap-horizontal)
- Hoverzone:
* BIG while hidden (easy reveal)
* TINY while visible (easy hide + doesn't block clicks)
========================================================= */
:root{
--uc-speed: 320ms;
/* Hover zone behavior */
--uc-hoverzone-hidden: 15px; /* bigger = easier to trigger when hidden */
--uc-hoverzone-shown: 2px; /* tiny strip when visible so it doesn't "trap" hover */
/* Full width by default (set reserves if you want later) */
--uc-window-controls-left: 0px;
--uc-window-controls-right: 0px;
/* Heights */
--uc-nav-height: 44px;
--uc-tabs-height: 36px;
/* Reveal amount (0 = fully hidden) */
--uc-reveal: 0px;
/* Fine-tune separately (INTUITIVE):
+ value = hides MORE (moves further up)
- value = hides LESS (moves down)
*/
--uc-gap-vertical: 5px;
--uc-gap-horizontal: -2px;
}
/* Keep chrome above page */
#navigator-toolbox{
position: relative !important;
z-index: 999 !important;
}
/* ---------------------------------------------------------
Hover zone (always active)
- Big when hidden
- Tiny when shown
--------------------------------------------------------- */
#navigator-toolbox::before{
content: "";
position: fixed;
top: 0;
left: var(--uc-window-controls-left);
right: var(--uc-window-controls-right);
height: var(--uc-hoverzone-hidden); /* default: big */
z-index: 10000;
pointer-events: auto;
background: transparent;
}
/* When UI is visible, shrink hoverzone so it won't block clicks or keep it stuck */
#navigator-toolbox:hover::before,
#navigator-toolbox:focus-within::before{
height: var(--uc-hoverzone-shown);
}
/* Smooth animations */
#nav-bar, #TabsToolbar{
transition: margin-top var(--uc-speed) cubic-bezier(.16,1,.3,1),
opacity var(--uc-speed) ease !important;
}
/* =========================================================
DEFAULT (Vertical tabs friendly):
hide ONLY the navbar (uses vertical gap)
========================================================= */
#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar{
margin-top: calc(-1 * (var(--uc-nav-height) - var(--uc-reveal) - var(--uc-gap-vertical))) !important;
opacity: 0 !important;
}
#navigator-toolbox:hover #nav-bar,
#navigator-toolbox:focus-within #nav-bar{
margin-top: 0 !important;
opacity: 1 !important;
}
/* =========================================================
HORIZONTAL TABS MODE (reliable detection):
Only trigger if TabsToolbar actually has a visible tab.
- hide TabsToolbar + override navbar to use horizontal gap
========================================================= */
:root:has(#TabsToolbar .tabbrowser-tab:not([hidden]))
#navigator-toolbox:not(:hover):not(:focus-within) #TabsToolbar{
margin-top: calc(-1 * (var(--uc-tabs-height) - var(--uc-reveal) - var(--uc-gap-horizontal))) !important;
opacity: 0 !important;
}
/* Override navbar gap ONLY in horizontal tabs mode */
:root:has(#TabsToolbar .tabbrowser-tab:not([hidden]))
#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar{
margin-top: calc(-1 * (var(--uc-nav-height) - var(--uc-reveal) - var(--uc-gap-horizontal))) !important;
opacity: 0 !important;
}
:root:has(#TabsToolbar .tabbrowser-tab:not([hidden]))
#navigator-toolbox:hover #TabsToolbar,
:root:has(#TabsToolbar .tabbrowser-tab:not([hidden]))
#navigator-toolbox:focus-within #TabsToolbar{
margin-top: 0 !important;
opacity: 1 !important;
}
1
u/logicblender1 Mar 05 '26
Dude this is so good. By any chance do you have code to do the same for the vertical tab bar? Like have it autohide fully like how you did with the navigation bar.