Amazon's Early Black Friday Deals are going live now. Check out here.

How to Hide or Remove Blogger Navbar

What is Blogger Navbar?

If you are using Blogger default templates, you notice a Navigation Bar (Navbar) at the top of your blog.

The Blogger Navigation Bar is hidden in most of the custom templates. But, if you want to hide/remove it in the default templates, you have to do it manually.

We can do it in 3 different methods. But before moving to the methods, let’s check it out the uses of the Navbar.

  • Blogger icon takes you to the Blogger.com. If you've already signed in, then it will take you to the Blogger dashboard.
  • Next Blog - takes you to the recently updated Blogger blog.
  • Search field - used to search the contents of the current blog.
  • New post - opens a new post window.
  • Design - takes you to the Template section.
  • You can see the sharing options such as Google plus.
  • If you find a blog post as objectionable, you can flag it from the Navbar.
  • You can sign in and sign out from the Navbar.

I highly recommend you to take a template backup before making any changes. Let’s get started.

Hide or Remove Blogger Navbar

1
  • Go to the Layout section.
  • Click on "Edit" link of Navbar widget and you should be in the Navbar Configuration window.​
Blogger navbar configuration window
  • Choose "Off" and click on "Save" button.
2
  • Go to Template > Customize > Advanced > Add CSS.
  • Paste the following code

#navbar-iframe {

display:none !important;

}

  • Click on "Apply to Blog" button.
3
  • Go to Template > Edit Html > Jump to Widget > Navbar 1
  • You can see the following lines:

<b:section class=’navbar’ id=’navbar’ maxwidgets=’1′ name=’Navbar’ showaddelement=’no’>

<b:widget id=’Navbar1′ locked=’true’ title=’Navbar’ type=’Navbar’>

<b:includable id=’main’> </b:includable>

</b:widget>

</b:section>

Navbar code
  • Select and remove all those lines.
  • Click on "Save template" button.

I hope that the information in this post is useful to you. If you find the information in this post useful, share this post with your friends.

How to Hide or Remove Blogger Navbar

Click to Tweet This Post

Also see: