CyberNotes
Web Browser Wednesday

Having toolbars in a browser can be both frustrating and convenient. On one hand they can often cram a lot of useful functionality into a small area, but on the other hand they eat up precious space that could be used for viewing websites. After all, we know what your browser can look like when you’ve installed a few too many toolbars.

I’ve managed to find a happy medium by automatically hiding the toolbars so that they only appear when my mouse hovers over any other toolbar (ex. the navigation/address bar), and that’s what we’re going to show you today. First we’ll go ahead and demonstrate how to do this with just the bookmarks toolbar, and then we’ll walk you through the steps needed to apply this to just about any Firefox toolbar such as the Google Toolbar.


–Auto-hide a Toolbar–

  1. Make sure you have the Stylish extension installed in Firefox.
  2. In the bottom-right corner of the Firefox window you should see the Stylish icon sitting in the Status Bar. Click on the icon, and go to Write Style > Blank Style.
    stylish blank style.jpg
  3. Provide a description for the toolbar that you’re about to auto-hide, such as “Auto-hide the bookmarks toolbar”. In the code box copy and paste the following:

    #PersonalToolbar{display:none;}
    #navigator-toolbox:hover > #PersonalToolbar{display:-moz-box;}

    The “PersonalToolbar” ID refers to the bookmarks toolbar, and when all is said and done your Stylish window should look something like this:
    firefox autohide toolbar.jpg

  4. As soon as you hit Save the changes should take effect immediately. The bookmarks toolbar will be out-of-sight, but it will reappear when you hover over another toolbar (like the address/navigation bar).

–Find the ID of a Toolbar–

Now what about the toolbars who’s ID you don’t know? That’s a little trickier, but it won’t take you long to catch on. The toolbar we’re going to use in this half of the demonstration is the Google Toolbar, and we’ll show you step-by-step how you can find its ID so that you can auto-hide it.

  1. If you’re using Firefox 3 you’ll need to go and download the DOM Inspector since it’s no longer included with the browser. It is bundled with versions of Firefox prior to version 3.
  2. Once it’s downloaded and installed you need to start it by going to Tools > DOM Inspector. This tool will give us the ability to get the ID of any element in the browser, including toolbars.
  3. Go to File > Inspect Chrome Document, and choose the first item in the list (it may say something different than what my screenshot does).
    chrome inspect.jpg
  4. Now in the DOM Inspector click on the icon in the toolbar that has a mouse cursor pointing to a rounded box. Then switch over to the Firefox window and click on an item on the toolbar you want to auto-hide. You should see a red box appear around it as you’re clicking.
    firefox dom inspector-1.jpg
  5. Now if you switch back to the DOM Inspector it will have highlighted the item that you clicked on. We’re looking for the ID of the toolbar itself, and not the item that you clicked on which was likely a button on the toolbar. If you look a little above the item that you clicked on you should see the ID of the toolbar:
    firefox dom inspector id.jpg
  6. Now we just need to plug that ID into the Stylish script that we provided above. So auto-hiding the Google Toolbar would look something like this:

    #gtbToolbar{display:none;}
    #navigator-toolbox:hover > #gtbToolbar{display:-moz-box;}

That’s all there is to it. It may take a little while for you to get the hang of using the DOM Inspector, but it will be worth it.

–Overview–

Now the power is in your hands to auto-hide as many toolbars as you want. This trick will also work for hiding multiple toolbars simultaneously, and they will all appear at the same time when you hover over the navigation bar.

Also, feel free to leave the ID’s of any toolbars you find in the comments below so that you might save other people a little bit of trouble.

There Are 25 Comments

  1. The stumbleupon (Which got me here) toolbar ID is simply “stumbleupon”.
    So the script would be like so:
    #stumbleupon{display:none;}
    #navigator-toolbox:hover > #stumbleupon{display:-moz-box;}

    • Could anybody help me find out the toolbar ID for the status bar? I don’t have dom inspector and mine is firefox 2 so cannot install the extension either.

    • If you still need it (i know, it’s 1/2 year ago you asked this, but maybe someone is interested in it: it’s status-bar

  2. Awesome tip! :mrgreen:

  3. You’re a good man Charlie Brown!!

    Thanks Ryan, i was looking for something like this!
    It’s a bit “complicated” but we’ll follow your instructions.

    You’re inspired!

    :P

  4. Thanks for the great tip. This is especially useful for netbook with small screen, such as the Eee PC. :)

    ID for Diigo = diigotb-toolbar

    #diigotb-toolbar{display:none;}
    #navigator-toolbox:hover > #diigotb-toolbar{display:-moz-box;}

  5. Why I use Google Chrome:

    [cybernetnews.com]

  6. Great tips!

    Only catch: it is difficult (almost impossible) to navigate through a folder in the bookmark toolbar as as soon as the mouse is hovered down to the items in the folder, the toolbar then also disappears. Any idea how to change the script to fix this?

    Otherwise, looks great!

  7. soulslayer wrote:
    Only catch: it is difficult (almost impossible) to navigate through a folder in the bookmark toolbar as as soon as the mouse is hovered down to the items in the folder, the toolbar then also disappears. Any idea how to change the script to fix this?

    I don’t think there is an easy fix for that issue. I’ll see if I can figure something out though.

  8. Ryan wrote:
    soulslayer wrote:
    Only catch: it is difficult (almost impossible) to navigate through a folder in the bookmark toolbar as as soon as the mouse is hovered down to the items in the folder, the toolbar then also disappears. Any idea how to change the script to fix this?

    I don’t think there is an easy fix for that issue. I’ll see if I can figure something out though.

    You can fix this editing the UserChrome.css file inside the chrome directory in your profile folder.
    For example, for the bookmark toolbar type the next CSS code:
    #navigator-toolbox:hover > #PersonalToolbar
    {
    visibility: visible !important;
    }
    #PersonalToolbar
    {
    visibility: collapse !important;

    Greetings

    • Could you help say that again? I am not a techie but I figured out how to collapse and uncollapse both my nav. bar & toolbar. But like soulslayer wrote I can’t get any of the buttons in the scroll down menus to work. I typed in what you wrote for each and again individually but nothing changed this problem.

  9. **Juanito** wrote:
    You can fix this editing the UserChrome.css file inside the chrome directory in your profile folder.

    I was going to provide instructions to people for using the UserChrome.css file, but it’s more complicated to explain than using the Stylish extension.

  10. **Juanito** wrote:
    You can fix this editing the UserChrome.css file inside the chrome directory in your profile folder.
    For example, for the bookmark toolbar type the next CSS code:
    #navigator-toolbox:hover > #PersonalToolbar
    {
    visibility: visible !important;
    }
    #PersonalToolbar
    {
    visibility: collapse !important;

    Greetings

    Works great! Thanks!

  11. Ryan wrote:
    **Juanito** wrote:
    You can fix this editing the UserChrome.css file inside the chrome directory in your profile folder.

    I was going to provide instructions to people for using the UserChrome.css file, but it’s more complicated to explain than using the Stylish extension.

    Yes, you’re right but unfortunately is the only way to do this, for now…

    soulslayer wrote:
    Works great! Thanks!

    U welcome.

    The CSS codes to tweak the chrome aren’t equal in Firefox 3 and Firefox 2

  12. It’s an excellent tip!

    But I have the same problem as Soulslayer had. I tried Juanito’s method, but it had no effect. I suppose I must’ve done something wrong.
    Could anybody give me more details how I should edit css file properly.

  13. Thanks yaar, great tips,
    Keep going

  14. i like this tip, it’s very useful. i prefer as much screen space for viewing the web page as possible so i’ve actually hidden both the menu-bar and the nav bar but i have not hidden the bookmarks bar because i use the bookmarks bar a lot more than the other two. the problem with this is, every time i go to click something on the bookmarks bar it moves two steps lower because the nav bar and menu bar appear. is it possible to change the hotspot size for the mouse before the other bars appear? as in, would it be possible to set it to view the hidden bars only when the mouse gets much closer to the top of the bookmarks bar? if that makes any sense to anyone, i’m unable to explain it better, but would appreciate any help (if possible).

  15. Can this be done using like “ctrl + alt” instead of hover?

  16. Does the “hover” attribute only apply to the #navigator-toolbox element? I was attempting to create an “auto-hide” menu (essentially how the menu bar behaves in Full Screen mode), but I can not seem to get any other element to work using “hover”. Here was one of my unsuccessful attempts with a custom toolbar I added called SHOWNAV:

    #toolbar-menubar {visibility: collapse !important;}
    #nav-bar {visibility: collapse !important;}
    #PersonalToolbar {visibility: collapse !important;}
    #webdeveloper-toolbar {visibility: collapse !important;}

    #__customToolbar_SHOWNAV:hover > #toolbar-menubar {visibility: visible !important;}
    #__customToolbar_SHOWNAV:hover > #nav-bar {visibility: visible !important;}
    #__customToolbar_SHOWNAV:hover > #PersonalToolbar {visibility: visible !important;}
    #__customToolbar_SHOWNAV:hover > #webdeveloper-toolbar {visibility: visible !important;}

  17. This one work better in FF 3.6

    Autohide NavBar

    Autohide NavBar

    menu {
    display: none !important;
    }

    #nav-bar {
    height: 1px !important;
    min-height: 1px !important;
    overflow: hidden !important;
    }

    #nav-bar:hover,
    #nav-bar:focus,
    #nav-bar:active {
    height: auto !important;
    }

    #navigator-toolbox > #nav-bar {
    border-style: none !important;
    }

    #navigator-toolbox > #nav-bar {
    border-top: 0px !important;
    }

  18. Editing the userChrome.css is essential to make this work right. FYI … If you want to do this without having to create and edit your userChrome.css (or perhaps you’re a newbie like me that’s too clueless), you can always create a button to make a toolbar popup/popdown, you’ll need the custombuttons addon, then follow these instructions:

    [custombuttons.mozdev.org]

    (be sure also to read the comment on how to force it collapsed upon initialization). Frankly I like it a lot better than having the top readjust all my content every time my cursor wanders up there, which I find a bit jaring. Most all your functions can be put on one toolbar anyway, then with some buttons to toggle some of your less used toolbars – works best for me.

  19. Hi!

    I there a way to do this, when a defined tab is selected? For example i have 3 tabs opened: Google, Yahoo and Facebook. When I select the Google or Yahoo tab the bar shoukd be visible but when i select the Facebook tab the bar should be hidden…

    If there is a way, i want to know it :-D thx

    greetings from germany

    btw: nice tip ;-)

  20. It worked, but now many of the buttons don’t seem to work quite right. What about how to un-autohide them if I want to do that sometime?

  21. I can’t get the Jerusalem Post toolbar to autohide! The toolbar ID is jpost.com but it still doesn’t autohide!

  22. In the new Firefox versions (currently version 8) is it possible to set the display property on hovering such that the toolbar appears below navbar (default behavior) and not above it?
    Please please help me!

Leave Your Comment


Message is the only required field.
Emails are not published.