How To Remove Blogger Navbar

WHAT IS BLOGGER NAVBAR?

Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog.This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates, so this tutorial might be useful only for those who are using a default Blogger template.

Advantages:

- when you click on the B icon, it will take you to blogger.com;
- a quick link to your Dashboard and "Sign in /Sign out" dialog;
- you can easily search and find other blogs;
- you can "Flag Blog" (if you consider content of a blog objectionable);
- NextBlog - takes you to a random, recently-updated Blogger blog;

The only disadvantage is visual. If you have customized design, this navbar just doesn't fit in. So, how could we get rid of it? It is very easy. Just follow these steps below:
How To Remove Blogger Navbar

Turn off The Blogger Navbar

Step 1. Log in to your Blogger account, click on your blog and head to the 'Layout' tab > look for the 'Navbar' heading and click on the Edit link as shown in this picture:

edit blogger navbar

Step 2. When the pop-up window appears, scroll down and select 'Off', then click the Save button:

turn off blogger navbar

Remove Blogger Navbar widget code from template

The above tips to hide Navbar. If you want to permanently remove Navber widget go to Template -> Edit Html. Now remove Navber section from just below <body> tag. The code looks like given below. Remove it.
<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
  </b:section>
And that's it! By using second tips I already removed the Blogger Navbar.

Related topic :

Comments/disqusion
30 comments

  1. says:

    Thanks for this. You rock!

  2. says:

    My pleasure. Thanks for the feedback :)

  3. says:

    but when i did the same, there appears some.....blogger error ensert the code balabla..
    please help me..

  4. says:

    Welcome Soman,

    Make sure you have inserted the code correctly and you haven't removed any other code accidentally. If it's still not working, try this method instead.

  5. says:

    don't forget to backup your template...

  6. says:

    It Worked, (Y)

  7. says:

    you all are awesome man

  8. says:

    Does not work. Error changing it.

  9. says:

    Thanks a bunch!! :)

  10. says:

    you're welcome ;)

  11. says:

    Worked like a charm! Thanks for the info!

  12. says:

    This trick is something special for me.. I already knew 2 different tricks but this one is different.. Thanks for the share!

  13. says:

    This method is not working in the new blogger interface. I have tried it on my blog and it says.......Oops, error connecting to it.

  14. says:

    I need help with placing the script code inside the box like your post, how do you do that?

  15. says:

    Blogger allows you to choose if you want to show it or not, all you have to do is going to design / page elements on top click edit nav bar scroll all the way down and select Off

  16. says:

    But, you will no longer see the Quick Edit pencil icon or wrench links icon on your blog even if you are logged in.
    All these methods deleting these icons. :-(
    I want back my useful icons :-)
    But how?

  17. says:

    It doesn't work for the newer version of blogger ...Why > ? please hlp !

  18. says:

    Hi,How to delete a empty space in blogger..

  19. says:

    Hi,How to Delete empty space in blogger..

  20. says:

    I used to add a code to my template but this is quite simple and straight forward.

  21. says:

    You just made this beyond easy! Thanks!

  22. says:

    No sharing option? :O

  23. says:

    yeah, thanks for your help!!

  24. says:

    Thanks Solved my problem.
    suraj
    http://www.diggbloggers.com

  25. says:

    Thank you!!! This post was super helpful!!

  26. says:

    Thanks! It's super effective

  27. says:

    Is there another easy way after I remove the navbar to sign in and out and make changes to my blog?

  28. says:

    Hi Lindsay,

    You can hide the navbar only to your blog visitors. Go to Layout again and check one of the options to show the navbar, then go to Template > Edit HTML and search (CTRL + F) for this line:
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

    Just above this line, add this code:
    <span class='item-control blog-admin'>

    Now look below the first line and find the </b:section> tag.
    Just after the </b:section> tag, add this code:
    </span>

    Now the Blogger Navbar will hide when someone visits your blog and it will be visible only to you.

    If you want to know how to make other widgets visible only to you, please read this tutorial:
    How to make a gadget/widget visible only to blog admin

    Thanks for visiting!

  29. says:

    thank you

  30. says:

    thanqqqqq bossss for the usefull infoo