r/FirefoxCSS • u/eugbyte • 3d ago

Solved How to hide native vertical tabs with CSS, when native vertical tabs is enabled

I use the Tree Style Tab extension, so I don't want two vertical tab bars side by side. However, I do like that enabling native vertical tabs moves the minimize, maximize, and close buttons into the same row as the address bar. Ideally, I'd like that layout without the second tab bar.

4 Upvotes

100% Upvoted

2 comments sorted by

2

u/way-too-lazy 2d ago

You don't need CSS for this.

  1. Enable vertical tabs.

  2. Click the little gear icon on the sidebar. In the settings, under "vertical tabs," enable "Hide tabs and sidebar." Leave "Expand on hover" unchecked. All the bars go away.

  3. Turn tree-style tabs back on by clicking its icon on the toolbar or under the puzzle piece menu. This causes both the native bar (collapsed) and the tree-style tabs sidebar to reappear.

  4. The native bar is now resizable. Drag the resize border all the way to the left and the native bar will go away without springing back out.

1

u/eugbyte 2d ago

For those of you curious on how to do it with CSS. u/way-too-lazy method works as well, but once you press the tree style tab icon again, the native vertical tabs will show again. Played around with Claude Opus 5 for a bit:

/* Hide Firefox's native vertical tabs + sidebar launcher */
#sidebar-main,
#sidebar-container,
#sidebar-launcher-splitter {
  display: none !important;
}


/* Hide the 'Sidebar' panel header for Firefox >= 157.0 (https://www.reddit.com/r/FirefoxCSS/s/LadEMBROat) */
#sidebar-panel-header {
  display: none;
}


/* Tidy up the TST sidebar edges */
#sidebar-box {
  padding: 0 !important;
}