October 06, 2010

How to hide the Blogger Navbar - Updated for 2010 (Quick Tip)

With all the changes to Blogger's template system, it seems no wonder that my original tutorial for hiding the Blogger nav-bar no longer works effectively (particularly for newer template designs).

In case you were wondering, it is possible to hide the Blogger nav-bar (which displays a search box and useful links). The principle is the same as in my previous tutorial in that we simply need to add a few lines of CSS to our Blogger template code.

Here's how my updated technique to hide the Blogger nav-bar in a few simple steps:

  1. Go to Design>Edit HTML in your Blogger dashboard
  2. Using your browser's search function, locate the closing </b:skin> tag in your template's HTML markup.
  3. Immediately before this line, paste the following section of code:

    #navbar-iframe, #navbar, .navbar {height:0px; visibility:hidden; display:none; margin: 0 !important;}
  4. Preview the changes to ensure everything looks the way it should, then click "Save".
That's all there is to it!

Is it okay to hide the Blogger Nav-Bar?

I'm pretty sure the Blogger Team won't mind if you choose to hide the Blogger Nav-Bar (since my previous tutorial was linked to on this official FAQ page).

However, I must point out that in hiding the nav-bar, you will lose access to some functions from within your site, such as the ability to access admin-pages and the random "Next Blog" links.

Don't forget that you could choose to alter the nav-bar colour and transparency through the Design>Page Elements section of your dashboard if you'd prefer not to hide it altogether!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy