Fixing Firefox Quantum: Auto-hiding toolbars

      3 Comments on Fixing Firefox Quantum: Auto-hiding toolbars

With Firefox axing native browser plugins, there are a lot of things I can’t do in the browser anymore. Hiding the toolbars is one of those annoying things that the great gods of Firefox’s dev team have deemed an unnecessary and frivolous feature.

Never fear! As luck would have it, a small userChrome.css edit is all you need to give your browser window an auto-hiding navigation and tab bar, complete with time-delay animations so it doesn’t disappear on you when you don’t want it to!

  1. First, open Firefox, and under Customize, make sure “Title Bar” is checked.
  2. Close Firefox.
  3. Navigate to your Firefox profile folder. Details on how to do that for each OS are found here.
  4. If you see a folder named chrome, open it. If you don’t, create it.
  5. In that folder, create a file named userChrome.css if one doesn’t exist.
  6. Add the following to this file:

Save, close the file, and relaunch Firefox. Bam!

I use this with a secondary Firefox profile so that I can use Cricut Design Space as web app, separate from my regular browsing session, so that I can avoid browser crashes and other problems that might interrupt a project midway through.

What it looks like:

About Claire

I've been running this site since 2008. I mostly use it to keep track of things I've learned in the IT world, like coding projects and server administration stuff.

3 thoughts on “Fixing Firefox Quantum: Auto-hiding toolbars

  1. chromax

    I really love this!
    The one thing I really missed in quantum. A great hint.

    If you donĀ“t want this ugly title bar, you will have the problem, that the min, max, close (windows) will not be clickable.

    I played with it and found a working solution:

    @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
    #navigator-toolbox {
    position: relative;
    z-index: 1 !important;
    height: 30px;
    margin-bottom: -3px;
    overflow: hidden;
    transition-property: height;
    transition-delay: 1s;
    transition-duration: 2s;
    transform: translateZ(1px) !important;
    }

    #navigator-toolbox:hover {
    height: 62px;
    transition-property: height;
    transition-duration: 0.5s;
    transition-delay: 0s;
    }

    #titlebar-buttonbox {
    z-index: 10 !important;
    transform: translateZ(100px) !important;
    }

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *