49 How to hide the Blogger Navbar - Updated for 2010 (Quick Tip) October 06, 2010 /

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!