Since userchrome.css isn't officially supported, you may not get an answer to your question. However, there's a subreddit (r/FirefoxCSS) where you can get help from other modders. There's also a #firefoxcss:mozilla.org room on the Mozilla Matrix server. If you need help to connect to our Matrix server, you can find more information on our Wiki.

This is so damn typical of Fiirefox, you get things the way you want and then the new version just changes everything with no rollback option. I don't want no stinkin' tab bar if I've only got one tab open. Why is that so hard for Mozilla to understand???

Tried the above code. Didn't work. Just left one tab open on the bar, didn't hide the bar

Hiding tab bar with one tab stopped working for me when I just upgraded to 76.0.1.

This issue also apparently came up for at least some people when version 70 was released, and here is that solution (and people did *not* have a problem with providing help with userchrome.css then). However, this solution does not work for me now. https://support.mozilla.org/en-US/questions/1271391

My work computer uses the "Extended Support Release" version 60.9 and hiding the tab bar works just fine. I tried to roll my personal computer back to an ESR version, but now apparently Firefox has made it a real pain to keep your profile if you roll back. (Why, Firefox, why?)

I found this userchrome.css code that totally removed the tab bar (and, again, there were no problems with providing userchrome.css help). https://support.mozilla.org/en-US/questions/1237154#answer-1164247

I modified things a little bit so at least I can (awkwardly) see a tab if more than one is open. It's not really what I want, but seemingly the best I can do for now. Here is my code:

   /* Squash tab bar to 1px tall and hide the tabs */
   #TabsToolbar {
     height: 1px !important;
     min-height: 1px !important;
     max-height: 1px !important;
   } 
   #context-openlinkintab { 
       display: none !important 
   }

If anyone has a real solution, though, for version 76, I would love to see it. Thank you.

I am the one who opened the question referenced above (https://support.mozilla.org/en-US/questions/1271391) and yes - just upgraded to Firefox 76, and the problem is back. Probably some internal CSS changed again. Would appreciate any help on this.

There's a thread on Reddit where the original poster here reported that they found a solution:

https://www.reddit.com/r/FirefoxCSS/comments/gedwdn/hiding_tab_bar_with_one_tab_in_firefox_76/

Thanks, that Reddit solution works for me.

The Reddit solution works for me, too. Thanks. Here is the code to add to your userChrome.css from that thread (thanks to cayhorstmann).

   tab:only-of-type, tab:only-of-type + #tabs-newtab-button {
       display: none !important;
   }
       #tabbrowser-tabs, #tabbrowser-arrowscrollbox {
       min-height: 0 !important;
   }

This is great news but as a non-programmer could someone tell me precisely where to put the snippet of code or better still paste the full finished correct version? I am sure a lot of people would be very grateful.

There is something intrinsically wrong when a program like Firefox can upgrade itself often silently and remove features, without any advance knowledge and then leave us floundering around for a solution just to get back to where we were quite happily before.

Not good Firefox guys, not good at all.

Edit: updated to 76.01 and still didn't work, just as before and the title bar is solid white. But then I don't really know what I'm doing. Help appreciated.

What do you mean by this part:

Edit: updated to 76.01 and still didn't work, just as before and the title bar is solid white.

I don't use the Title bar, so my tabs appear in the title bar instead. When I test the rules, it removes the tab and + button from the title bar leaving the title bar pretty much empty except for the usual 3 windows buttons at the right end. Screenshot:

Is that what you're getting? Or are you still trying to install the rules? If this is your first time with userChrome.css --

It's a little bit of a project, so make sure you set aside 10 quiet minutes to work through it.

(For anyone who already has a userChrome.css file set up, you just need to add the rules under (A) to your file.)

(A) Select and copy the following style rule code

/*** Hide tab bar when only one tab -- For Firefox 76 ***/
tab:only-of-type, tab:only-of-type + #tabs-newtab-button {
  display: none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See second attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See third attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you downloaded in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

Success?

Here's a "before and after" if you turned on the Title bar using Customize (this is Windows 10):

Ref. Customize Firefox controls, buttons and toolbars

I am familiar with creating a userChrome file and also how to change toolkit.legacyUserProfileCustomizations.stylesheets preference to true

The code I had in the file previously had worked perfectly until version 76 was released when it suddenly didn't.

All I asked was a simple question, where does the code snippet go or preferably what is the complete code.

Not an unreasonable quesion, or so I thought.

Hi David H, does the new code work for you?

All I asked was a simple question, where does the code snippet go or preferably what is the complete code. Not an unreasonable quesion, or so I thought.

As you may have noticed, threads on this board are not a 1-to-1 communication; for example, you joined someone else's thread instead of starting your own question. Contributors try to provide enough context for the numerous people who will find this thread in a search, so the fact that I gave full instructions is not meant to be a comment on your personal situation, but a general solution for users at many stages of their journey with userChrome.css. If you are already more advanced, great, you know what to do.

Could you not just post the full code as originally requested? If not for me, for anyone else with the issue? Is that too much to ask?

Could you not just post the full code as originally requested? If not for me, for anyone else with the issue? Is that too much to ask?

This was the full code for the requested feature of hiding the tab bar when there is only one tab. This reply was intended as the complete answer to the question posed. Did it not work for you??

(A) Select and copy the following style rule code

/*** Hide tab bar when only one tab -- For Firefox 76 ***/
tab:only-of-type, tab:only-of-type + #tabs-newtab-button {
  display: none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

Hello, yes that worked.

I was under the impression the code had to be appended to my existing userChrome file, not replace it.

Thank you for your assistance.

I was under the impression the code had to be appended to my existing userChrome file, not replace it.

That really depends on what your other rules were doing. This is why it's a good idea to start a new question for things that are highly personalized.

It was NOT highly personalised, I wanted what the original poster wanted. Nothing more nothing less.

This code doesn't work for me with Firefox 78.1 ESR. The single tab is not shown, but the the space used by the tab toolbar is not removed. My tabs toolbar is below the bookmark bar.

(A) Select and copy the following style rule code

/*** Hide tab bar when only one tab -- For Firefox 76 ***/
tab:only-of-type, tab:only-of-type + #tabs-newtab-button {
  display: none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

Hi click-click, the code doesn't collapse the title bar. The title bar can show either:

• the tabs bar
• the page title
• the menu bar (on Windows)

If you remove the tabs bar from the title bar without replacing it with the page title (check the box for "Title bar" in Customize) or the menu bar, the space will just remain empty, other than the system default window buttons.

Customize feature info: Customize Firefox controls, buttons and toolbars

Note: including a off-site URL in a reply (for example, the URL of the embedded image) will divert your post to the link spam moderation queue, and you won't see it immediately.