Monday, March 21, 2011

How to make disappearing navbars in blogger (aka "auto hide" and "peekaboo" navbars)

I saw the disappearing blogger navbar on my sister-in laws blog and loved it! I did a quick google search and found a super easy tutorial on how to do it. If you want to add one to your blog, it is easy if you follow the tutorial from Shabby Blogs here.



Unfortunately, it isn't perfect when viewing your blog in Internet Explorer. A disappearing navbar (also known as an "auto hide navbar" and a "peekaboo navbar") flickers in Internet Explorer 6 and below. All internet browsers handle html a little differently and I don't know enough to fix the code that was provided in that tutorial.

I did make an addition to their code. I wanted my blog to still have a 30px space between the top of the window and my header. I added this code to make this happen:

.content{
top: 30px;
}

If you want to do the same (you'll need to have already followed the shabby blog tutorial) just add the above code directly after  <style type="text/css"> in the html gadget.

Hit save, and see the change.

Hope this helped someone. I found this easy and fun, so I wanted to share.

1 comment:

  1. Looks nice! I like mine much better without that nav bar sticking out all the time.

    ReplyDelete

ShareThis

LinkWithin

Related Posts Plugin for WordPress, Blogger...