Reduce Firefox's Tab and Bookmarks Bar height

Martin Brinkmann
Oct 16, 2014

Even if you are running a high-res monitor you may encounter situations where websites cannot be displayed in full directly on the screen.

If a page is long you may need to scroll vertically to access all the contents displayed on it. It is possible to make room by eliminating browser UI elements that get in the way.

If you never use the bookmarks toolbar for instance, you may want to remove it from the UI as you get an additional 30 or so pixels to display website contents.

The same is true for the tab bar, but since it is usually needed, all you can do is reduce its height just a little bit to free up some vertical space in Firefox.

You have two options to do so. The first involved installing browser add-ons that perform the necessary steps for you. It is just a matter of installing Thin Tabs or Thin Bookmarks in Firefox to reduce the height of both toolbars in the browser.

Take a look at the following two screenshots to see the difference in height.


firefox reduce height tabs bookmarks

Both toolbars work fine for the most part after installation of the extensions in Firefox. I ran into issues with the close button though at the end of the tab bar as it did not work properly anymore.

Instead of using add-ons to modify the height of Firefox's bookmarks bar or tab bar, you can also manipulate a file in Firefox's profile directory directly instead.

The advantage is that you don't need to install add-ons for the operation, the disadvantage that it takes a minute longer to complete.

  1. Load about:support in the browser's address bar and hit enter.
  2. Locate the show folder button under Application Basics and click on it. This opens the profile folder using the system's default file browser.
  3. Open the Chrome folder there. If it does not exist, create a new folder and name it Chrome.
  4. Open the file userChrome.css in the Chrome folder. Again, if it does not exist create it.
  5. Add the following information to the file:

To change the tab toolbar height:

#TabsToolbar { height: 25px !important; }

To change the bookmarks toolbar height:

PersonalToolbar {height: 25px !important;}

The height parameter defines the new height of either bar. It is set to 25 pixels by default but you can change it to other values that work better for you.

Make sure that the following line of code is displayed at the top of the file once:

@namespace url(""); /* only needed once */

The full code looks like the following in userChrome.css

@namespace url(""); /* only needed once */

#TabsToolbar { height: 25px !important; }

#PersonalToolbar {height: 5px !important;}

Reduce Firefox's Tab and Bookmarks Bar height
Article Name
Reduce Firefox's Tab and Bookmarks Bar height
Find out how to reduce the height of the Firefox tab bar and bookmarks bar.

Tutorials & Tips

Previous Post: «
Next Post: «


  1. jamvaru said on June 1, 2021 at 10:32 pm

    all broken

    1. jamvaru said on June 1, 2021 at 10:35 pm

      oops, found the last one, it works; pixels per pix
      then maybe increase font size? idk, maybe just live with it; pathetic firefox

      1. jamvaru said on June 1, 2021 at 10:37 pm

        i had it lookin ok with linuxmint cinnamon but i don’t like cinnamon so i switched to mate; trying to figure out ‘system scale’, which may be the problem, in mate

  2. Nickmey said on April 2, 2017 at 11:10 pm

    King wrote:
    > There was a much simpler solution. Goto “about:config”, set the following value to 1.5.

    This is very useful and ideal if you are using an XP compy as “set-top-box” for your TV:
    the css.devPixelsPerPx values between 0.8 and 1.2 adjust the size of the typing, leaving
    the browser panels alone – so you can set for BIG, TV-screen readable letters in an otherwise
    “compact” browser. I additionally used nonqu’s method to save screen real estate….
    All in all – very rewarding infos, thanks to you all ;)

  3. King said on September 13, 2016 at 5:41 am

    On Linux Mint, I set the font scale to 1.5. FireFox toolbar became too big. I tried the methods in this article, they did not work. There was a much simpler solution. Goto “about:config”, set the following value to 1.5.

    The default value -1.0 means use system scale, and 1.0 means 100% scale, etc.

    1. a said on November 30, 2016 at 11:35 am

      Thanks, that is an awesome about:config entry.

  4. b0li said on April 20, 2016 at 1:12 pm

    nonqu method works in FF 54.0.2 as well. THX!!

  5. Pierre said on October 18, 2014 at 5:59 pm

    Thks for the extensions “thin”

  6. FDw said on October 16, 2014 at 4:52 pm

    The two extensions mentioned in this article (both by the same developer) are incompatible with versions below Firefox 29, and Pale Moon, so the manual, extension-less method may be the only solution for users of those browsers.

    However, I found out that with the extension Tabs on Top installed, any decrease in the tab bar size will actually push the tab bar down, and tab bar height values of less than 25px will squish the favicons of the inactive tabs.

  7. Henk van Setten said on October 16, 2014 at 1:54 pm

    Using FF 33.0 on Win 8.1 x64, I tried Martin’s userChrome solution. I experimented with several tab height settings, multiple times restarting Firefox, but it just didn’t work at all. Didn’t do anything.

    Next I tried the more complex userChrome code given by nonqu in the comments, and that one worked right away, reducing tab height as intended.

    So I advise using the latter. Thanks nonqu.

  8. nonqu said on October 16, 2014 at 8:59 am

    I’m using this with australis:

    @namespace url(;
    @-moz-document url(chrome://browser/content/browser.xul) {
    #TabsToolbar {
    min-height: 24px!important
    min-height: 24px!important

    #nav-bar .toolbarbutton-1:not([type=menu-button]),
    #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
    #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    padding-top: 2px!important;
    padding-bottom: 2px!important

    Credit goes to r/firefox community. Funny how a few lines of css do what iirc mozilla said was impossible in australis – gives you “small icons”-ish mode and trims the tabs bar.

    1. Bob said on August 22, 2018 at 7:47 pm

      Thanks nonqu for providing the CSS code. I prefer it over the thin tabs addon. It took me days to find the right code that will work on FF esr 52.9.0

    2. jonas said on October 18, 2014 at 7:15 am

      thanks for this setting. I am using firefox 33 and applied your suggested setting together with the fox only better extension because I have a small screen in my netbook. it helps me to view the web better with a maximum space. thanks again

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.