How to Hide, Disable, Remove Blogger Navbar

By Posted 2006 Updated   Blogging

How can you hide, disable or remove the Blogger Navbar, a navigation and search bar on top of all blogspot blogs on Blogger. Blogger navbar has several useful features and different colours, but sometimes it may not blend with your template, and give you an unprofessional design.

Many bloggers have asked me how to remove this Blogger navbar. Remember, Blogger Navbar can be disabled for users publishing via FTP as per Blogger Terms of service. For free Blogger users, not publishing via FTP, you cannot disable the Navbar. So it is best to confirm with Blogger support that you can indeed hide the Navbar before proceeding to do so. You do not want your blog banned by them for such a small issue. I take no responsibility for the same.

Navbar in Blogger FTP Blogs

Now if you are publishing by FTP, some tips are available on other websites to which I point you.

Turn off the Blogger Navbar – the best and official way – Go to Template, and now a new option “OFF” appears in the drop down list of “Change the Blogger NavBar”. Just select it and republish your blog.

To hide it in custom templates published via FTP is add style="margin-top:40px;" to the topmost element of your Template. (i.e. <table> would become <table style="margin-top:40px;">)

Hide Blogger Navbar in Custom Themes

For all other custom themes, the best way to hide the blogger navbar is add the following code to the HEAD section of your blog HTML.

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>


28 comments on “How to Hide, Disable, Remove Blogger Navbar

  1. Dio Bach says:

    Alternatively, just select Off in the Change the Blogger NavBar drop down – located on the template section of your blogger settings pages. Its a lot less faff! :)

  2. Christina says:

    I don’t have an option to turn off the navbar in templates, probably because I don’t upload via FTP.

    I have tried some of the above tips and they aren’t working for me, I’m not sure what I’m doing wrong. When I try to adjust the margins, I get pieces of my template code between the navbar and my title jpg. The blog also looks worse in IE than Firefox.

  3. Rob says:

    This sounds very helpful.
    Can I find some more details about it in Blogger Terms of Use?

  4. wie says:

    all do not work in new blogger

  5. CK says:

    Just add the below at template header. I work for me in new Blogger as well (both Firefox 2 and IE 7)
    #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }

  6. Nikos Apostolou says:

    I tried everything but nothing works!
    Please help me!

  7. stevpan@gmail.com says:

    I checked the blogspot page and found you only need to disable the navbar div in css style.
    e.g. this code could hide the navbar too.

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

  8. Tim says:

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

    THIS WORKS!!! Thanks!!!!!!

  9. Daisy says:

    #navbar-iframe {

    worked for me. i tried

    #b-navbar {

    but it didn’t work.

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

  10. Normand says:

    Before the Body {

    just add

    #navbar-iframe {display: none !important;}

  11. blogtech says:

    is removing the navbar against the terms of blogger? not sure about that, though. to be safe, does anyone know how to make the navbar’s background transparent? at least if we can’t remove it, we can still make it more appealing with our layouts.

  12. TECH says:

    This will move it to the bottom:
    #navbar-iframe {
    position: fixed;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }

  13. Darren Ferneyhough says:

    great tip!

    works for me – I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site – the nav bar would ruin the effect, so it’s great that this tip works!

  14. kimiaj08 says:

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

    This one is ok!

  15. Sakura~~ says:

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

    it hid my navbar alright… but instead, now i see the
    words #navbar-iframe { height: 0px; visibility: hidden; display: none;
    instead :(

  16. Chris says:

    Thanks a lot, the last tip works great.

    #navbar-iframe {
    display: none !important;
    }

  17. Marta says:

    You guys who leave a code, on the comments, you’re so nice. Thanks.
    And the post is amazing, best ever and you care to updated it yet.

  18. sam says:

    i think it is simple to hide navigation bar but i suggest do’nt hide it,it help in navigation also to visit.
    by the…
    ]]>
    Find out above code and write above the following code..
    #navbar{display:none}
    .And enjoy your beutiful blog.

    • sam says:

      find below code.
      ]]></b:skin>
      write above this code. #navbar{display:none}

      sorry in above comment full code had not appeared..

  19. Money Maker Info says:

    I used this code:

    #navbar-iframe {
    display: none !important;
    }

    …and works properly. Thanks.

  20. JK says:

    Hello! Is there a way to change the background color on the navbar, to any color you’d like?

  21. mohit says:

    hiding NV is simple..

    #navbar {
    display:none
    };

  22. sunah suka sakura says:

    thanks~ it’s hidden already!

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

  23. Dorian says:

    Here’s some CSS to remove all the blogger-ish links on the left, leaving only the ones on the right which are useful to you as the blog author:

    #b-navbar #b-navbar-logo, #b-query-box, #b-follow-this, #b-share-this, #b-flag-this {display: none;}

    And here’s some code for making the bar background and border disappear, so it’s just those links:

    #b-navbar #b-navbar-bg {display: none;}

    Now if anyone has any ideas on restyling that navbar with CSS, just to remove the bottom border, that’d be great. Here’s what I’ve been trying:

    div#navbar div#b-navbar {
    border-bottom: 0px none #FFF;
    }

    I can’t seem to get the selector to take at all… I tried using all sorts of variations like #b-navbar…

    Looks like the options for modifying the Navbar have disappeared completely, can’t find any up-to-date explanation in Google’s own help files.

  24. Masturah says:

    Thanks for the tips.
    Works like a charm =)
    I use the code below

    #navbar-iframe {
    display: none !important;
    }

  25. arif says:

    I have been searching for this long time and finally got it here. it really works.thanks

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php