Navbar peekaboo: Hide and make it appear on hover

This tutorial will show you how to make Blogger navbar invisible and have it reappear when you mouse over the top of your blog.

The end result of this hack is slightly is different from other navbar peek-a-boo hacks available on the net. Most hacks will:

  • Hide the navbar, but leave it’s footprint visible in normal view, or
  • Look good during normal view, but push the rest of you blog page downward when hovered.

This hack won’t do either of that. The navbar will simply appear on a different layer, floating on top of your blog header. Visit my widget showcase blog for the demo. Here are the screenshots of how your  navbar area will look like once you’ve applied the hack:

hidden navbar

Normal view

navbar appears on hover

Hover view

Note: This hack should work in Firefox, Chrome and Opera. It won’t work on Internet Explorer.

  1. Go to Dashboard > Design > Edit HTML.
  2. If you had previously removed the navbar, then you need to undo that first before proceeding. Refer to How to remove or restore Blogger navbar.
  3. Look for ]]></b:skin> line in your HTML code and add the following CSS code snippet right before it:
#navbar {opacity:0;filter:alpha(opacity=0);position:relative;margin-bottom:-30px;z-index:10;} 
#navbar:hover {opacity:0.7;filter:alpha(opacity=70);}

You can change the hovered navbar transparency by decreasing the value of opacity property in line 2. The value of 0 makes it completely transparent and 1(100) makes it completely opaque.

(For Designer template, you can also add the snippet without leaving Template Designer)

Enjoy!

15 comments to "Navbar peekaboo: Hide and make it appear on hover"

Dar-us-Salam Publications September 13, 2010 at 5:55 PM    

great, it worked for me.
Is it possible to add gadgets on the right & left side of the blogger window?

Greenlava September 14, 2010 at 11:55 AM    

@Dar-us-Salam Publications
No, it's not possible. To add widgets, you need to widen the window and add sidebars.

Frieda November 6, 2010 at 12:55 AM    

It worked great! Thank you!

The Triond Experiment January 8, 2011 at 11:29 PM    

I'm gonna try this on my blog. I think this is a neat hack since it will give more space to the blog.

Thanks!

RasaMewah.com January 13, 2011 at 2:48 AM    

Thank you very much...it worked

Greenlava January 13, 2011 at 1:58 PM    

@RasaMewah.com
You're welcome, and do enjoy other tutorials too :)

jinky January 28, 2011 at 10:13 AM    

Thanks for the tutorial, it works!!

cd April 12, 2011 at 10:56 AM    

this is reallly good....thnx!

3 anis May 14, 2011 at 7:37 PM    

it works.tqvm ^^

Honeybee July 8, 2011 at 6:01 PM    

yay! it works. thanks

Dickie Paria August 17, 2011 at 9:05 AM    

Works great in Safari too. Thanks, Dickie

Triyono August 25, 2011 at 1:53 AM    

thanks buddy

Forex Broker September 19, 2011 at 2:12 AM    

Thanks for the code. We use it on our blogspot site now.

Mamavisca January 12, 2012 at 5:41 AM    

THANKS!

R. D. Finch July 19, 2012 at 3:35 PM    

So easy to do with the CSS option in Template Designer. Gave my header a clean, streamlined look. I use Firefox, so not working in IE was not an issue for me.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment