Hide, Remove or Color Change the Navbar in Blogspot

Have you ever wanted to remove the default Navigation Bar (Navbar) at the top of your Blogger blogspot which features the search box and other useful links? I myself had wanted to often times, but nonetheless, the ease of signing in and out of Blogger or to access the admin pages of my blog so easily via the Navbar far exceeds my distaste of its previously default blue color.

Great that Blogger has made available for us to alter or change the colour of the Navbar to blend with our blog's theme or design which is a significant improvement aesthetically, especially with the transparency options. Once done, I was most contented and had no desire whatsoever to hide or remove the Navbar ....or so I thought until I learned something new recently!

To change the colour of the Navbar, if you're interested, just go to Design | Page Elements. Locate the Navbar which is the first and topmost page element and click the Edit link on its right. The Navbar Configuration window pops open for you to select the colour that best matches your blog's background. Once you've made your choice, just click the Save button to save the changes and you're done. The image below best illustrates how that can be done.

Whatever, it's thanks to Anncoo who recently requested for help on how to sign-in after hiding the Navbar that gave me the impetus to google for answers and to learn further about it. I'm glad that I pursued on this seemingly trivial matter and have found something wonderful in the process and would like to share it here.

Excited to have discover that there is a much better alternative than removing the Navbar altogether or simply altering its colour. This template hack will hide the Navbar at the top of the blog but it will become visible whenever you mouseover that top area where it's located - like playing hide and seek! That way, with a simple mouseover effect, the Navbar is readily available with all its goodies displayed whenever you need it or appropriately invisible when not required. Wonderful, huh!

Moreover, it's so easy to implement! Quicker and easier too for those with Blogger's new Designer templates, by adding the relevant CSS via the Template Designer, following the steps shared below.

How-to hide and restore the Navbar easily when required (a mouseover effect actually) :

1. Sign in to your Blogger account. At Dashboard, click Design | Template Designer.
   
   
2. Go to Advanced | Add CSS tab. Add the following CSS snippets in the field box provided:
   
   #navbar-iframe {opacity:0.0; filter:alpha (Opacity=0);}
#navbar-iframe:hover {opacity:1.0; filter:alpha (Opacity=100, FinishedOpacity=100);}
   
   
   
   
3. You can live preview the change straightaway in the bottom section, and then click the Apply to Blog button to save changes. To exit from the Template Designer, simply click the Back to Blogger button and you're all done.
   
   
   

Tips:

1. Should you ever want to revert to the static and default Navbar again, just remove the CSS code that you've added earlier at step #2 above
2. If the vertical space between the Navbar and Header is too high as set by some template designs, just reduce the height by including one more additional CSS code, that is:
   .header-outer {margin-top:-1.6em;}
   You can change the em value accordingly to fit your blog
3. This hack does not work in all browsers. Anyway it does work perfectly for Firefox and Safari!

Some bloggers may even prefer to remove the Blogger Navbar altogether for whatever reasons best known to themselves.

Removal is allowed by Blogger though not recommended as confirmed by Gatsby of The Blogger Team in Nov 11 2008 (refer to link provided at Nitecruzr.net) :

While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use.

Follow these simple and easy steps on
how-to remove the Blogger Navbar :

1. Sign in to your Blogger account. At Dashboard, click Design | Template Designer.
   
   
2. Go to Advanced | Add CSS tab. Add the following CSS snippets in the field box provided:
   
   #navbar-iframe {height:0px; visibility:hidden; display:none;}
   
   
3. Click the Apply to Blog button to save changes and Back to Blogger to exit. That's all to it!

Tips:

1. To get back your default Navbar, just remove the CSS added earlier.
2. With the Navbar removed (just invisible actually), you're now unable to sign-in or use the links provided therein. Not to worry as you can still sign-in and sign-out, but a little differently and with some effort. Copy and paste the following links into the browser address bar as needed :
   (a) To sign-in: www.blogger.com which will lead you to the Dashboard
   (b) To sign-out: www.blogger.com/logout.g

Note: the CSS snippets at step #2 of both tutorials above can be alternatively added directly to your blog's template - go to Design | Edit HTML, to edit template. Before editing, download to save a copy of the full template before adding the CSS codes just above the following:
/* Variable definitions

A big THANK YOU to Chuck of Nitecruzr.net where I've learned so much! Truly appreciate his generosity in sharing his technical expertise.

All said, I would definitely chose the first option above where the Navbar appears and disappears effortlessly with just the rollover of the mouse....now you see and now you don't! Lovely, right?

I didn't include this wonderful hack in this blog since I find the Navbar's colour perfectly blends with my blog's theme but it sure looks great at my other blog at peacockflower's world where it's implemented.

Enjoy!

Keep learning~~keep smiling~~keep sharing!!