How to Hide Blogger Nav Bar and Have It Appear When You Hover Over It

A navigation bar isn't defined in any one way; on many websites, such as Google and Facebook, feature a navigation bar along the top of the page. However, you can also feature a invisible navigation bar and have it reappear when you mouse over the top of your blog.

Thanks to AllBlogTools.com for sharing this trick.

1. Login to your Blogger account.


2. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


3. Back up your template.


4. Check the  "Expand Widget Templates".


5. In the code window, search for (Ctrl + F):



]]></b:skin>



6. Add below code just before ]]></b:skin> tag



#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/***/: 30px9; }

#navbar-iframe:hover {
  height:40px; !important; 
  }



7. Save your template and you are done.

If you already applied "How To Remove A Blogger Navbar" to your blog, please undo it before you start.

This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.