Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Relocate or hide the tabstrip tabbar

more options

I use a widescreen monitor with lots of unused real estate to the sides. I think most people do the same. Vertical real estate is valuable to me. Maybe Firefox developers use their monitors in portrait and prefer things as they are.

I use "Vertical tabs reloaded" and previously "Tree Style Tab" to put the tab strip to the left of my screen. This achieves 2 major benefits:- 1. more free vertical real estate to see the webpage (the only reason for using my browser) and 2. I can scroll through open tabs (better productivity).

Firefox 57 has broken this. The tab strip is fixed at the top and there is no way to hide it. Mozilla might as well have stuck 1/2" of duck tape across the top of my screen for all the good this does.

I can't help wonder why not introduce vertical tabs as an integral part of Firefox, with an option "Tabstrip position: Top/Bottom/Left/Right/Hidden"

I use a widescreen monitor with lots of unused real estate to the sides. I think most people do the same. Vertical real estate is valuable to me. Maybe Firefox developers use their monitors in portrait and prefer things as they are. I use "Vertical tabs reloaded" and previously "Tree Style Tab" to put the tab strip to the left of my screen. This achieves 2 major benefits:- 1. more free vertical real estate to see the webpage (the only reason for using my browser) and 2. I can scroll through open tabs (better productivity). Firefox 57 has broken this. The tab strip is fixed at the top and there is no way to hide it. Mozilla might as well have stuck 1/2" of duck tape across the top of my screen for all the good this does. I can't help wonder why not introduce vertical tabs as an integral part of Firefox, with an option "Tabstrip position: Top/Bottom/Left/Right/Hidden"

Chosen solution

Try this:

#TabsToolbar {
visibility: collapse;
}

#titlebar {
display: none;
}

The only downside is that you'll lose the close/minimize/maximize buttons in the upper-right (but you can still close the window by hovering over the icon in the taskbar).

Read this answer in context 👍 5

All Replies (8)

more options

You can hide the tabstrip at the top by creating a custom userChrome.css file.

This article has directions (and a video) on how to do this: https://www.userchrome.org/how-create-userchrome-css.html

When you get to the "Adding Style Recipes to userChrome.css" step, place this in the file:

#TabsToolbar {
    visibility: collapse !important;
}
more options

Thanks user1929,

Not being code savvy I was nervous about doing this but the steps in the video were easy to follow. I copy/pasted your text into my newly created css file and bingo!

Well sort of...

I now realise that the tab strip is not removed...it's simply made invisible. I still lose the 1/2 inch at the top of my screen to a blank strip where the tabs once were.

As I now use Tab Centre Redux and all my tabs are on the left of my screen, can anyone work out how to remove the redundant tab strip from the top?

Modified by BillyMcSkid

more options
more options

Thanks a lot!

Tab Center Redux is a nice improvement over Vertical Tabs Reloaded as it has a "open new tab" button at the top. Nice!

Still can't find how to delete the tab bar/tab strip from the top of my screen though.

more options

Chosen Solution

Try this:

#TabsToolbar {
visibility: collapse;
}

#titlebar {
display: none;
}

The only downside is that you'll lose the close/minimize/maximize buttons in the upper-right (but you can still close the window by hovering over the icon in the taskbar).

more options

Thanks again user1929,

That's the one. Perfect, thanks. Much appreciated!

more options

To add to user1929's solution, the following will also remove the header of the sidebar. Now I'm back to the look/feel that I love! Thanks everyone for the help!

#TabsToolbar {

visibility: collapse !important; }

#titlebar {

display: none; }

#sidebar-header {

display: none !important; }

Modified by Shy21Grams

more options

To do this in Developer Edition you need to place this file in a different folder. Using the instructions to find the folder through the FF help menu works fine too. If the chrome folder and file isn't there, just create it and restart FF.