Blogger : How to hide and remove Navigation Bar at the top of the page

Every blog you create in Blogger will contain a Navigation Bar also known as Navbar at the top of every page.

Navbar provides visitors with features like a search box, Google+ share button and when signed in, it provides you with the ability to edit posts, edit widgets, and go to Blogger Dashboard directly from your website.

I do not use it that much and think that without it, the site looks a bit more professional.

In this post, you will learn how to remove Blogger Navbar by modifying Blogger Template.

Blogger NavBar

Click image to enlarge

You might be wondering if it is permitted to remove Navbar from a website that is hosting on Blogger Platform. It turns out that having Blogger Navbar on your blog is optional as is evident by this answer on Google Blogger Forum.

So now that we know that removing Navbar is allowed, let's go down to business.

Note:You can also just hide the NavBar by going to Dashboard > Layout and click on top right widget named Navbar and select Off.

In this case, changing the template is not required but the downside is that the space the Navbar occupied will still be there. In my opinion, this is even worse than having a NavBar, since you will have empty space for no reason.

Removing Navbar code from your template

Here is what you need to do to:

  1. First it is always a good practice to back up your current template before doing any modifications to it. Go to Dashboard > Template and click on Backup / Restore button located on the top right corner and choose Download full template.
  2. Switch to Dashboard > Template tab and click on Edit HTML button and then also on Proceed button. Template code will show up.
  3. Find the end of </header> tag and start of <body> tag. You should find those tags by scrolling around ¾ down the template code.
  4. Below the <body>tag you should find section code for navbar that looks like this:
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
  5. Comment out this code by adding <!-- at the beginning and -->at the end so that it looks like this:
    <!--  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
  6. Click on Save Template
  7. After clicking Save, you will get a following message Warning: Your new template does not include the following widgets: Navbar1 and also a message Deleting widgets cannot be undone.You will have to choose one of two options: Keep widgets or Delete widgets
  8. In both cases, the Navbar at the top of the page will not be shown. Which one you choose really depends on how often do you edit posts and widgets directly from your website.
    Blogger Editing Post icon on a website
    Editing Post directly from a website
    Blogger Editing Widget icon on a website
    Editing Widget directly from a website
    • Choose Keep widgets when
      1. you want to keep the ability to edit post edit widget directly from a website.
      2. you want to be able to switch Navbar back if you change your mind later (look at end of this post to learn how)
    • Choose Delete widgets when
      1. you don't mind losing those icons for editing posts and widgets directly from a website.
      2. you think you will not revert Navbar back as the code will be removed from the template.
      3. you want to speed up your site a little. Since Navbar functionality will be removed, fewer resources will load during each page load and your page speed will improve.
    Note:When NavBar was deleted from this blog, loading time of a page was reduced by around 200ms.

This is it. Now every page on your website will be missing Blogger Navigation Bar.

How to restore Navbar (only when KEEP WIDGETS was chosen!)

If you changed your mind and want Navbar back, then all you have to do is:

  • Follow previous steps 1, 2, 3 and find the code shown in step 5
  • Remove the comment code <!-- and --> and you should end up with the code shown in step 4
  • Since you just uncommented Navbar1 section, you now have 2 sections named Navbar1. The other one was added automatically after you clicked Keep widgets. So you need to comment out this second section with the same name. It is located at the end of the template so scroll all the way down and search for:
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
  • Comment out that line by adding comment code <!-- at the beginning and -->at the end so that it looks like this:
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
  • Click Save template

If you would like to know more about modifying Blogger Template, read the following post: How to modify Desktop / Mobile Template?



Click HERE to add your Comment
  1. Bob T
    August 7, 2013
    • admin
      August 7, 2013
  2. shahid
    September 14, 2017
  3. belinha fernandes
    September 19, 2019
    • admin
      September 20, 2019

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.