[ # ] Restore Navigation Buttons after Firefox 3 Switch

/* Posted June 24th, 2008 at 8:59am */
/* Filed under CSS, Reference, Web */

firefox 3 logo

I upgraded to Firefox 3 today and after the switch I found out that I had lost my left and right navigation buttons. After floundering for a bit, I was able to restore them quite easily but at the expense of my current toolbar layout and settings.

If your problem isn’t as severe as mine, it might be as easy as right clicking on the toolbar and selecting “Customize…”

firefox toolbar customize

From there it’s as easy as dragging the left and right direction buttons back onto your toolbar. If that doesn’t work you could also try clicking on the “Restore Default Set” button boxed in red below. I must warn you that this will delete your layout and restore state it was at the very first day you ran Firefox.

firefox toolbar customize

In my case, neither method worked so I had to take a drastic measure. I closed Firefox and then backed up this file:

C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\localstore.rdf

and deleted it from my profile. After starting Firefox again, I got my navigation toolbar back (and tons of other junk I had cleaned out).

But while we’re at it, I’ll show you my current toolbar layout. I use a highly customized setting where I don’t even bother with the navigation and bookmark toolbars since vertical space is a precious commodity. Have a look:

To rid myself of the navigation bar, I simply moved the navigation, home, refresh, and stop buttons to the top toolbar because let’s face it, it’s just a waste of space past “Tools.” I also moved the address bar up there as well. Turns out there’s still quite a bit of usable space if you do this. Then I hid the navigation and bookmark toolbars since I already had everything I needed in the top toolbar.

I also tweaked my chrome\userChrome.css file in my profile to eliminate unnecessary buttons when applicable. What I mean is I don’t get the stop button when there’s nothing to stop, the forward button when there is no page to go forward to and so forth. The code to add in your userChrome.css file is quite simple and the comments describe what each accomplishes:

/* Remove Edit menu (if you already use all the keyboard shortcuts) */ #helpMenu, #edit-menu { display: none !important; }


/* Remove Back button when there's nothing to go Back to */

#back-button[disabled="true"] { display: none; }
/* Remove Forward button when there’s nothing to go Forward to */

#forward-button[disabled="true"] { display: none; }
/* Remove Stop button when there’s nothing to Stop */

#stop-button[disabled="true"] { display: none; } 
/* Remove Go button from address bar */

#go-button-stack, .search-go-button-stack { display: none !important; }

/* Make the active tab wider */ tab[selected="true"] { min-width: 200px !important; }

I have a tweak to remove the Go button because it really isn’t necessary when all you have to do is hit “Enter.” I also have a tweak to widen the tab I am currently browsing just so I know where I am. These tweaks will allow you to maximize your vertical browsing space and once you get used to it I’m sure you won’t ever go back to the old inefficient layout.