How to hide the bookmarks toolbar and display it on mouse hover - gHacks Tech News

How to hide the bookmarks toolbar and display it on mouse hover

My Bookmarks Toolbar in Firefox is filled with lots of bookmarks, many of them stored in folders to add an almost unlimited number of bookmarks to the toolbar. While it means additional clicking, it makes hundreds of bookmarks available on the toolbar.

While the Bookmarks Toolbar is useful for accessing websites fast it has one limitation that made me do some research to see if there would be a way to fix it.

I'm talking about the fact that the Bookmarks Toolbar in Firefox is always displayed. It is possible to uncheck the toolbar which means that it is not shown which is not what I wanted to do of course. I was looking for a way to increase the space on the screen that the visited website would use while still keeping the Bookmarks Toolbar ready to be accessed whenever I needed to access it without having to enable it first.

I found a way to hide the Bookmarks Toolbar in Firefox and activate it only if the mouse is hovered over the area where it would normally appear. This way it is possible to have more space available for websites while access to the bookmarks toolbar is still possible by simply moving the mouse over its area.

hide bookmarks toolbar

If you want to apply this Firefox tweak you do need to access the file userChrome.css which is located in the 'chrome' directory of the Firefox profile folder. Add the following two lines at the end of this file and restart Firefox afterwards:

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

Update: You may need to create the userChrome.css file in the folder if it does not exist already in there. Just create a new text document and rename it accordingly, and you should be good to go. The method is still working in all recent versions of the browser (at the time of writing that is Firefox 29).

The easiest way to find the profile folder of your Firefox installation is to type about:support into the browser's address bar and click on show folders there to open it.

Instead of modifying a file in your Firefox profile folder, you can install the Hide BookmarksBar extension for Firefox instead which adds the same functionality to the browser. Besides options to display the bar on hover, it can also be configured to display it on keypress or when you click on a button in the interface.

Summary
How to hide the bookmarks toolbar and display it on mouse hover
Article Name
How to hide the bookmarks toolbar and display it on mouse hover
Description
Explains how you can configure Firefox to auto-hide the bookmarks toolbar to display it when you hover the mouse over its area automatically.
Author
Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. Jason said on October 18, 2007 at 1:20 am
    Reply

    Great hack! Thanks.

  2. Ace_NoOne said on October 18, 2007 at 7:30 am
    Reply

    Nice idea – I’ll be sure to give this a try.
    (You should submit this idea to Lifehacker.com.)

  3. Al said on October 20, 2007 at 4:02 am
    Reply

    Is the > after hover correct? I thought it should be a semicolon?

    Great hack — always enjoy your blog!

  4. Ace_NoOne said on October 20, 2007 at 7:09 am
    Reply

    @Al: “>” is the child selector; it only selects the direct children of an element without selecting its descendants further down the tree.

  5. Martin said on October 20, 2007 at 7:13 am
    Reply

    Al sorry for that.The code was messed up, I corrected the issue.

  6. Anthony said on December 8, 2007 at 11:08 pm
    Reply

    WONDERFUL HACK. Thanks.

  7. Rob said on December 31, 2007 at 5:33 pm
    Reply

    I’m new at this kind of thing and having trouble getting this to work. Right now the only text in my userChrome.css file is: #PersonalToolbar {display: none;}
    #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

    …and it is saved in: C:\Program Files\Mozilla Firefox\defaults\profile\chrome

    Thoughts? Also, does anyone know how to expand the bookmarks toolbar to be two lines?

    Thanks.

  8. Martha said on February 17, 2008 at 11:25 pm
    Reply

    To hide the Bookmarks Toolbar, I followed the directions (added the two lines to the end of my userChrome.css file and restarted Firefox).

    But the Bookmarks Toolbar is still there!

    Please advise. Thanks.

  9. abhay said on July 14, 2008 at 12:49 am
    Reply

    I want to increase the toolbar space. I dont care about the viewing area, and I also dont want to stuff multiple buttons under one folder/button. How do I do that.

  10. BCloud said on September 6, 2008 at 4:56 pm
    Reply

    Fantastic! Even better than what I was thinking.

    Thanks man!

  11. sbw07 said on September 9, 2008 at 12:54 pm
    Reply

    I used this tweak to auto-hide the toolbar, but now clicking on any bookmarks in subfolders of the Bookmarks Toolbar doesn’t work?

    Any ideas?

  12. Mutant said on October 31, 2008 at 3:34 am
    Reply

    Great Hack! i use it whenever a new version of firefox comes out.And also when i install it on new PC,

  13. julius said on August 4, 2009 at 7:35 pm
    Reply

    cant get it to work. it wont save

  14. Nyuszika7H said on April 26, 2010 at 9:38 pm
    Reply

    Hi,
    You can do that much easier. Install the extension called “Stylish”, then restart Firefox. Right-click its statusbar icon, then click “Write new style” -> “Blank style…”. Give the style a name, and paste the code inside the larger textarea. It’s even possible to preview it before saving. However, you can’t currently undo and redo preview without doing [Ctrl]+[A], [Ctrl]+[X], “Preview”, [Ctrl]+[V], “Preview”. From the manage interface added into add-on manager, you can also easily disable and uninstall it, like extensions.

    In most times, you don’t need restart to apply/undo changes. One exception is when you hide scrollbars, you’ll need to restart, otherwise you’ll get a small 4-way scollbar inside sites and textareas.

Leave a Reply

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

Please note that your comment may not appear immediately after you post it.