How to Remove and Hide Blogger NavBar (Top Navigation Bar)

When browsing Blogger powered weblogs hosted on blogspot.com domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.

Turn Off and Disable NavBar in Blog Published by FTP or SFTP

  1. Login to Blogger.
  2. On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Template

  3. The Edit HTML page under Template tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.

    Turn Off and Disable Blogger NavBar

  4. Click on SAVE TEMPLATE CHANGES button when done.

Remove and Hide NavBar in Blogger Widget Template

  1. Sign in to Blogger.
  2. On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Layout

  3. Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

    Edit Blogger HTML

  4. Search for the following line of code:

    ]]>

    Before the line, add in the following line of code:

    #navbar { display: none; }

    or:

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

  5. Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

  1. Login to Blogger.
  2. On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Template

  3. The Edit HTML page under Template tab should be loaded. If not, go to the tab.
  4. Search for the following line of code:

    </style>

    Then, add the following line of code before that line:

    #navbar-iframe { display: none; }

    The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.

  5. After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

    body {

    Add in the following like of code after the body tag:

    position: relative;
    top: -32px;

  6. Click on SAVE TEMPLATE CHANGES button when done.

Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.

This entry was posted on Monday, January 12th, 2009 at 3:45 am and is filed under Weblogs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

46 Responses to “How to Remove and Hide Blogger NavBar (Top Navigation Bar)”

Pages: 1 2

  1. dreamsky
    February 7th, 2010 11:22
    46

    It worked!!! I can’t believe it…wow! thanks.
    I hated the nav bar on my site……………

  2. John MX
    January 26th, 2010 17:44
    45

    Well u have to completly remove the code

    #navbar-iframe {
    display: none;

    and that’s it, hope it works..

  3. litcadence
    January 14th, 2010 20:08
    44

    The blogger template that I have chosen has turned off my navbar. The html template already says
    #navbar-iframe {
    display:none;

    what do i put in the none part to make it show? what’s it supposed to say?

    thanks

  4. Fida
    January 8th, 2010 02:05
    43

    Thanks it works for me

  5. Sriram
    December 21st, 2009 15:13
    42

    Super trick. Thanks.

  6. joe
    December 11th, 2009 16:05
    41

    Nice! very helpful. It work For ME :)

    I love you FUll

  7. Abijah Gupta
    December 4th, 2009 01:19
    40

    Awesome!!
    It works perfectly…

    thnx for sharing… :)

  8. Leo
    December 3rd, 2009 20:18
    39

    I registed on blog last month. I could not find any thing related to #navbar in the HTML code.All I saw is
    Is that mean they closed that door for us to do hide the blog link.

    Thanks

  9. Misaki
    November 28th, 2009 11:32
    38

    THANK YOU SO MUCH! IT WORKS GREAT!

  10. Stefana
    November 14th, 2009 08:25
    37

    It works great, but how to then access my Dashboard? I can no longer sign out either….

  11. joel
    November 12th, 2009 18:56
    36

    Here’s an odd problem. I’m using the widget template. In my browser (FF 3.5, linux) the line of text is fine. But on other machines with other browsers, there seems to be the white line above. I’ve tried putting in the 32 pixel bump, but that makes the top disappear from when it’s in my browser. Any way you can think of to make that line of text browser or system sensitive?

  12. Sockz
    October 17th, 2009 04:12
    35

    I love you. o.O

    I knew the code before, but I had no clue where to put it xD

  13. Vahe
    October 14th, 2009 01:08
    34

    Thanks alot my blog looks much better without the nav bar

  14. Kyle
    September 29th, 2009 14:09
    33

    I am still unable to remove the space with the position: relative;
    top: -32px;

    I am using the classic template what else could be wrong?

    Here is the page http://ericksonkytest.blogspot.com/

  15. clint
    September 25th, 2009 15:16
    32

    At last – wow , that took months to get right and now that it works , i am just ecstatic. Thank you so much. The code that did it for me was the insertion of:

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

    just before the ]]>

    i am using one of the templates that come with blogger, but not the classic

  16. theslabber
    September 12th, 2009 11:44
    31

    Fantastic. The directions worked perfectly. Many thanks.

  17. TheRickMaster
    September 4th, 2009 20:04
    30

    thanks a bunch works a treat

  18. chuck
    August 21st, 2009 05:54
    29

    Thanks very much for the information, very informative!

  19. Sanjay
    August 17th, 2009 18:00
    28

    This is great. Thanks for this post. It helped really well.

  20. franz
    August 7th, 2009 18:55
    27

    thanks for the tip. works like a charm

  21. Girl galleries picture
    July 19th, 2009 21:47
    26

    Thank you – this helps so much in apperance of my website – that nav bar was so blah on my site.

Pages: 1 2

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to My Digital Life Comments RSS feed to receive notification of latest comments posted.
« MozyHome Unlimited and MozyPro Promo Coupon Code (15% Off Mozy Price)
New Sony Ericsson W715 Walkman Phone Exclusive For Vodafone »

New Articles

Incoming Search Terms for the Article

remove blogger navbar - hide blogger navbar - remove navbar blogger - how to remove navbar from blogger - blogger remove navbar - how to remove blogger navbar - blogger hide navbar - remove blogger bar - removing blogger navbar - hide navbar blogger - how to remove the navbar in blogger - remove navbar - how to remove blogger bar - blogger navbar hide - blogspot remove navbar - delete blogger navbar - remove navbar from blogger - hide navigation bar blogger - how to remove the blogger navbar - how to remove navbar in blogger - remove navbar in blogger - hide navbar in blogger - how to remove navbar blogger - hide 2.0 navigation bar - hide blogger bar - remove blogger navbar 2009 - how to hide blogger navbar - remove navigation bar - hide blogspot navbar - delete navbar blogger - delete navbar from blogger - hide navigation bar 2.0 - how to delete navbar in blogger - remove nav bar blogger - remove navbar from blogspot - Remove nav bar in blogger - removing navbar from blogger - hide navigation bar on blogger - how to delete blogger navbar - how to hide the navbar in blogger - how to remove navbar - navbar remove - hide the top blue part of the navigation - hide navbar - remove nav bar - blogger navbar remove - how to remove the navbar from blogger - code to take off navigation bar - hide blogger nav bar - removing blogger bar - how to remove blogger banner - blogspot hide navbar - how to remove nav bar from blogger - hide blogger banner - remove blogger navigation bar - HOW TO HIDE NAVIGATION BAR - blogger remove nav bar - hiding navbar in blogger - blogger hide top bar - hide top navigation bar 2.0 - how to hide navbar in blogger - remove navigation bar from blogger - remove blogger nav bar - disable blogger navbar - remove blogger banner - how to remove navbar on blogger - how to remove nav bar in blogger - how do i remove the blogger navbar - how to hide navigation bar on blogger - how to remove blogger navigation bar - code to remove blogger navbar - remove bar from blogger - remove blogger top bar - hide navbar blog - blogger hide navigation bar -