SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Monday, October 25, 2010

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!

Screenshot to show the Navigation Bar (navbar) at the top of Jacqsbloggertips' blog

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.

Screenshot to illustrate how to configure the colour of the Navbar in blogspot

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);}


    Screenshot to illustrate how to add CSS snippets at the Blogger Template Designer

  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.

    Screenshots of a blog's top section, with the invisible and visible navbar after template's configuration
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!!

6 comments:

  1. Thanks Jacqueline, I've just done it. Yup, looks better and neater!

    ReplyDelete
  2. @ Mr. Lonely - thanks!

    @ No-Frills Recipes - You're welcome!

    ReplyDelete
  3. Hi Jacq, Just want to check with you how come I can't find my hidden Navbar in IE. I've to sign thru Blogger.com
    My default browser is Google chrome.
    Another question is I find the loading is very slow in
    Firebox, can you help?

    Thanks
    Anncoo

    ReplyDelete
  4. Hi Anncoo! I really don't know what's causing your problem with the navbar. Cheah of No-frills Recipes uses IE too but all's clear. I'm using Firefox and Safari and it's working perfectly.
    Re slow loading in Firefox - I just know that downloading speed for sites/blogs with too many graphics and the likes is greatly impaired irrespective of what browser you use. The only way to overcome slow downloading/uploading is to subscribe to a higher speed broadband for internet... a little costlier but so worthwhile, that's my humble opinion.
    Sorry, not able to help much.

    ReplyDelete
  5. Thanks Jacq for your quick reply.
    I hide the Navbar on Google Chrome browser, can you please tell me how to remove this from Google Chrome - CSS and I'll do it again on IE?

    Thanks!

    ReplyDelete
  6. Hi Anncoo!

    Just remember that there are two ways to add the relevant script to hide the Navbar to your blog, either via Edit Template or the Template Designer. And, once implemented, it's applicable, irrespective of which browser you use to access your blog.

    Since you're now facing a problem, I can only suggest (no guarantee that it'll succeed) that you do it all over again - first backup your full template, then remove the previous script(s) that you've added via Edit Template and save changes. Remember, there should only be one relevant script for your blog.
    Next, add the script again. I'd suggest that this time you add the relevant CSS snippet via the Template Designer for easy editing in future. Just follow the steps on how-to-hide and restore the navbar in my tutorial.

    This is the only way I can think of to solve your problem. Hope all's well for you this time.

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search