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:

Normal view

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:

view sourceprint?

1	#navbar {opacity:0;filter:alpha(opacity=0);position:relative;margin-bottom:-30px;z-index:10;}

2	#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!