Tech Tips. Gadgets. Gaming.

How to remove or hide Navigation Bar (navbar) in Blogger

blogger-nav-bar-remove

The navbar (navigation bar) is the horizontal bar located at the top of your page. If you think it doesn’t match your blog’s design, or if you need that extra space for your banner — you can remove it to suit your needs.

Here’s how:

1. Go to your Dashboard > Layout

2. under Template tab, click Edit HTML to edit template

3. Just add the piece of code below somewhere between the <head> and </head> tags of your blog’s template…

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

…like this:

  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
/*-----------------------------------------------
Blogger Template Style
Name:     Minima Black
Designer: Douglas Bowman
URL:      www.stopdesign.com
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

4. Click SAVE TEMPLATE.

Not sure about the <head> </head> tags?…

Here’s another way. Just look for the piece of code that looks something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

…and place the code just above it like this:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Click SAVE TEMPLATE. And that’s it!

Happy blogging!

Get updates delivered straight to your inbox!

Enter your email address:

22 comments

  1. Brilliant – it took a bit of trial and error, but it eventually worked!

  2. Just dedicated an award to you. Check out my site

  3. I don’t think I read here if it’s possible to change the color — apparently blogger only has 4 to choose from. Regardless, I’m getting a new look and mine will match the new colors anyway. I’m just say’n. New name and avatar too, just so you know and don’t run away when you come back. And, I did correct your URL on my blogroll ;) Happy night 2u and gr8 post.

  4. Thanks, Rhonda! :)

  5. Thanks for the great tips!

  6. I love you guys!!!

  7. Thanks for your help. If a html dimwit like me can do it then anyone can.

  8. Thank u v mch

  9. fantastic ….got rid of that bar! thanks

  10. YEWA /

    BEST GUIDE i tried so many shit and dont work except this!

  11. 1. As before, Go to Layout > Edit HTML.
    2. Find the word, in the template source code.
    3. Now insert the following code just before ,

    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }

    Click on the preview button to make sure that the navbar is hidden, then save the template.

    That’s it. You’ve removed the blogger navbar for ever.

  12. Great Info! I just removed the navbar from my site!

  13. In case anyone is interested in whether or not hiding the blogger navbar is a violation of the Blogger TOS, it isn’t. See the following post with an explanation by a Blogger employee:
    http://groups.google.com/group/blogger-help-customizing/browse_thread/thread/c7e3226fe35da11e?fwc=1&pli=1

  14. Alya Khan /

    here is the video..
    step by step..
    video tutorial..
    very easy to understand with this video..

  15. nice share!!!

    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;}

    as the script for the bar is that the way to hide and show the bar is to change the “none” to “block”
    none=hide… block=show

  16. Thank you for the info. I removed already the navigation bar.

    Thanks.

  17. it is just recently that i knew that it’s possible to remove this navbar, my blogs were just bad and so, for long time. In my opinion it’s always a better option to remove the blogger navbar because when it’s not done, the blog just looks like a novice blog. Thanks so much for the trick! Wow! This tip will grow my traffic by 200%, many people really ignore this tip. I thank you so much guy!

  18. athanx dude
    a remived my navbar using your tiips
    thanx,,
    see my site after removal of navbar

  19. Thanks for tip! But is it possible for me to hide the nav bar only and when people point over to the nav bar then it will appear again? Your help is much appreciated. TQ^^

  20. Thanks for tip! But is it possible for me to hide the nav bar only and when people point over to the nav bar then it will appear again? If it is possible, how should I do it? Your help is much appreciated. TQ^^

Leave a Reply