Home » Blogger Tutorials, Tricks and Hacks » Blogger Beginners » Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


hi all, few days ago, one of my visitors asked my about how to hide the blogger navbar and make it appear when hovering it.
actually i liked the idea and i thought it would be great to make it. so i’m here today to tell you how, it’s very easy and it’s one step process and it’s all done by tweaking blogger navbar code.

Please read before adding it to your blog.
  • If you already applied the hack ( How To remove or hide Blogger Navbar ) to your blog, please undo it before you start.
  • This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.
    And I added a hack for the code to make the navbar work normally in case of finding any IE bugs.
Adding the code to your blog.

Please log into your blogger account.
Now navigate to Layout >> Edit html >>
and find the following code :


And Before it, add the next one :

#navbar-iframe {

/* IE7, IE8, IE6 */
#navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {
height:40px; !important;

Now click Save Template
And You Are done,


please click here to see demo, If this hack is not supported with your browser try to see it in another browsers ( Firefox, Chrome, or opera) .
If you like this tutorial, please share and follow me.

Liked It ? Please Share


15 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. BEBEN says:

    awesome MAX…more simple CSS…wow…i’ll review this trick…Thank’s before MAX..thumbsup for you

  2. Simon says:

    What is if I want to add new post or customize my blog? Since the navigation bar is hidden already. What URL that link to the editing or customize the blog?

  3. Florence says:

    very useful indeed. i saw this in a blog, but the admin didn’t tell me how he did it. thanks max!

  4. John says:

    Ooo! i found my stuff here…

  5. Max says:

    thanks all for your nice words,
    @ simon, you can hover your navbar to go to your dashboard.

  6. I’m using your work in my blog, it’s just awesome, thanks a lot!
    It’s great that I’ve found this site, I suppose it will be much help for me. πŸ™‚
    Kepp up the good work!

  7. Medo Joe says:

    Thank you so much, i needed this for one of my blogs as it seemed conflicting with the layout.
    great trick.

  8. Malin says:


  9. Max says:

    @ Atonemovie Blog,Medo Joe and Malin oh my god, your words are encouraging me to work more and more and give you more tutorials.

  10. c says:

    Hi Max it didnt work for me….

  11. Jay says:

    Thanks a mint for this Max, I’ve just installed this code for my blog and it works! A simple solution for solving an all-too familiar layout problem at Blogger. Keep up the great work!

  12. edward says:

    thank you..nice and direct instruction..please see my blog..ΓΌ your tutorial already applied..thank you..

  13. Faisal says:

    Thank you its very nice now my blog looks pretty cool
    your instructions are very nice to understand

  14. raja says:

    Thanks for the post, its really helpful, i did it on my page: http://chudai-ki-story.blogspot.com/ its working great.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here