Can I hide native tabs at the top of Firefox?
To hide the native tabs, you'll have to add a new file called userChrome.css
and the css property visibility: collapse
.
To do this, in Firefox click on Click on Menu -> Help -> Troubleshooting Information
or navigate to about:support
in the address bar.
Under the Application Basics
section, there will be a section called Profile Directory
with a button to Open Directory
.
In the Profile Directory
create a new folder called chrome
. In the chrome
folder create or edit the file userChrome.css
if it already exists.
The contents of userChrome.css
should be the following.
/* hides the native tabs */
#TabsToolbar {
visibility: collapse;
}
Some optional further modifications to put in userChrome.css
are:
/* hides the title bar */
#titlebar {
visibility: collapse;
}
/* hides the sidebar */
#sidebar-header {
visibility: collapse !important;
}
A configuration that Xilin Sun uses is:
/* hides the native tabs */
#TabsToolbar {
visibility: collapse;
}
/* leaves space for the window buttons */
#nav-bar {
margin-top: -8px;
margin-right: 74px;
margin-bottom: -4px;
}
Try these out and see what you think looks best.
To answer your question in the comment, you may like this option better. I tried using visibility, but it was extremely flashy and jittery with the hover.
/* Option 1 */
#TabsToolbar {
opacity: 0.0;
}
#TabsToolbar:hover {
opacity: 1.0;
}
/* Option 2 */
#TabsToolbar {
visibility: collapse;
}
#navigator-toolbox:hover #TabsToolbar {
visibility: visible;
}
If you're running Windows 10, I've found the following gives the best integration:
- Enable "Title Bar" mode by going to the hamburger menu (☰) → Customize → Check the "Title Bar" checkbox at the bottom of the screen.
- Apply the following userChrome.css:
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
opacity: 0;
pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important;
}