Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

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

How to completely remove tabs bar using userChrome.css

  • 3 replies
  • 1 has this problem
  • 1 view
  • Last reply by cor-el

more options

I have been seaching for the solution for the whole day, and i found the closest one. It Does remove tabs, windows buttoms, but the background bar still remains, and i dont need it this way. So thats the code i used to make it >>>>>

  1. main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar .titlebar-spacer {
       border-inline-end: none;

}

  1. main-window:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
 opacity: 0;
 pointer-events: none;

} /* This makes the bar shorter vertically but removes the 3 window buttons */

  1. main-window #TabsToolbar {
 visibility: collapse !important;

} /* For full screen mode */

  1. TabsToolbar[inFullscreen]{
 display: none !important; 

}

On the screenshot you can see what remains on tabs' bar place I need my browser to end just above the URL string, so there wont be empty space in the top of the monitor. Can you help me find solution for this problem, please?

I have been seaching for the solution for the whole day, and i found the closest one. It Does remove tabs, windows buttoms, but the background bar still remains, and i dont need it this way. So thats the code i used to make it >>>>> #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar .titlebar-spacer { border-inline-end: none; } #main-window:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { opacity: 0; pointer-events: none; } /* This makes the bar shorter vertically but removes the 3 window buttons */ #main-window #TabsToolbar { visibility: collapse !important; } /* For full screen mode */ #TabsToolbar[inFullscreen]{ display: none !important; } On the screenshot you can see what remains on tabs' bar place I need my browser to end just above the URL string, so there wont be empty space in the top of the monitor. Can you help me find solution for this problem, please?
Attached screenshots

All Replies (3)

more options

You can use the title bar area for the title of the current page (Title bar option) or for the Menu bar. I don't know whether the title bar itself can be hidden or whether people normally slide the rest of the toolbars upward.

I agree with trying https://www.reddit.com/r/FirefoxCSS/ because a number of users with tabs in the sidebar probably hang out there.

more options

What other code do you have in userChrome.css as it is possible that other code interferes (i.e. you can try with only this code) ?

You can also try a rule to hide the caption buttons.

#TabsToolbar .titlebar-buttonbox-container {
  display:none !important;
}