About Blogging WP Tutorials Google Apple Computers Downloads SEO Facebook Twitter
  • 11/02/2006    

How to Hide, Disable, Remove Blogger Navbar

Advertisements

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>

41 Responses

  1. 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;
    }

    Thanks, CK

    CK posted on 01/01/2007
  2. I tried everything but nothing works!
    Please help me!

    Nikos Apostolou posted on 27/01/2007
  3. Thanks a lot!
    this code works for me!

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

    stevpan@gmail.com posted on 26/06/2007
  4. 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;
    }

    stevpan@gmail.com posted on 26/06/2007
  5. here is the video..
    step by step..
    video tutorial..
    very easy to understand with this video..

    http://www.metacafe.com/watch/739548/remove_blogger_navbar/

    zack posted on 02/08/2007

Leave a Reply to “How to Hide, Disable, Remove Blogger Navbar”

Name Email Site