How to Enable or Remove the Blogger Navbar Using 2 Methods

Want to learn how to get rid of or delete the Blogger Navbar? The Blogger Navbar is the navigation bar menu at the top of a Blogger blog above the header that appears on older Blogger themes. It is easy to get rid of the Blogger Navbar and in today's Blogger Tutorial I am going to show you two different methods to disable, hide or delete it or to reinstate it if that is your goal. You would use the second method only if for some reason you cannot enable the Blogger Navbar by the easy method which is by turning it on and off in the Navbar gadget in Layout Designer. (Updated April 2022)

Advantages vs Disadvantages of the Blogger Navbar

Most people dislike the Blogger Navbar and want to delete it because it looks unprofessional and in the past it encouraged readers to leave a blog by clicking on the Next Blog link. If you are using a custom template the Blogger Navbar is likely to already be hidden but if you are using one of the older default Blogger templates eg Simple, there will be times when you will need to remove it manually to stop it showing up.

Before you get rid of the Blogger Navbar completely though remember that it has some pretty useful features such as:

• Follow Me link to encourage your readers to follow you (Blogger has removed this unfortunately)
  
• Share via email, Facebook, Twitter
  
• Blog search
  
• Quick links to Blogger New Post, Design and Blogger Dashboard
  

I would suggest that if you do decide to hide or delete the Blogger Navbar that you add the custom search box gadget and some social sharing icons to your blog to partially compensate for the features you will be losing.




If you simply want to change the color of the Blogger Navbar please refer to my Blogger tutorial How to Change the Color of the Blogger Navbar.

2 Ways to Disable the Blogger Navbar - Navigation Search Bar

There are two methods to disable the Blogger Navbar: Method 1 involves turning it off in the Navbar Gadget while Method 2 is mostly geared at bloggers who are using an older Blogger theme and need to hide the Navbar by adding HTML code to the template itself.

Method 1: Steps to Remove or Hide the Blogger Navbar

The following method is a step-by-step guide to turn off or disable the Blogger Navbar using the Navbar Gadget.

1. Sign in to Blogger
2. From the Blogger Dashboard go to Layout
3. Find the Navbar Section which should be the first Gadget at the top of your blog in layout
4. Click the edit link or pencil icon to edit the Navbar Gadget
5. In the Configure Navbar window that opens up scroll down to the bottom





6. Click the on radio button to turn the Navbar Gadget off. Green light for off and clear for on. (If you are trying to reinstate the Navbar make sure the radio button on the Navbar Gadget is clear.)
7. Click Save
8. Click Preview (eye icon at the bottom right-hand corner) to Preview your blog without the Navbar displaying above the header
9. Click the Save icon (located next to the Preview icon)

Method 2: Steps to Remove or Hide the Blogger Navbar

This second method of deleting or removing the Blogger Navbar is done through a change to the Blogger template. Essentially it hides the Navbar with code but does not actually delete the code.

1. Sign in to Blogger and select the blog you wish to change
2. From the Blogger Dashboard go to Theme
3. Click the orange down arrow next to the Customize button
4. Click Backup to back up your blog before proceeding
5. Once backed up click on Edit HTML from the drop down menu by clicking on the down arrow once again
6. Click anywhere inside the template and then search the following code using CTRL + F (PC) or CMD + F (Mac) to bring up the search box: ]]></b:skin>
7. Insert the code below just before the ]]></b:skin> tag
   
   
   #navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }


8. When you are satisfied click on the Save button to save your changes
9. Click on View Blog to admire your Blogger blog with the Navbar removed

Blogger Tip:
If you decide that you want to reinstate the Blogger Navbar you can do one of two things:

1. Simply remove the code you inserted:
   
   #navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }


2. Or comment out the code like this
   
   /*
   #navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }*/

Summary

Today I have explained how to turn the Blogger Navbar off and on in the Navbar Gadget. I have also shown you an easy trick to remove or alternatively hide the Blogger Navbar using the hardcode method. By adding a short piece of code to your Blogger template the Blogger Navbar can be hidden from view. I have also shown you what to do if you need to reinstate a missing Blogger Navbar.

Related Links

How to Change the Color of the Blogger Navbar
How to Add a Copyright Notice to a Blogger Blog
How to Add a Print Friendly Button to Blogger
How to Backdate Blogger Posts to Publish Articles on a Retrospective Date
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Make Money From Affiliate Banners with Blogger
How to Get More Adsense Clicks with Blogger
Easy Ways to Put Banners on Blogger

How to Change the Color of the Blogger Navbar Menu

This Blogspot tutorial shows you how to change the color of the Blogger Navbar which appears above the header in older Blogger themes when enabled. Changing the color of the Blogger Navbar so that it matches the color scheme of your Blogger blog takes less than a minute and is an easy trick that requires no change to the Blogger code as all changes are done in the Navbar Gadget. Updated April 2022

To go straight to the step-by-step tutorial on how to change the color of the Navbar or read on for details about the Navbar and its purpose.

What is the Blogger Navbar?

The Blogger Navbar is the colored or sometimes transparent search bar menu that appears by default at the top of older Blogger themes above the header. The Navbar provides quick navigation links that make it easy to jump to the Blogger Dashboard, start a new post, access Theme Designer or share a page directly from your live blog.

Blogger Navbar Example

Currently Blogger offers the choice of 6 different Blogger Navbar colors: blue, tan, black, silver, transparent light and transparent dark. Transparent light and transparent dark are the most recent additions. It is uncertain how likely it is that Blogger will continue to offer more color options for the Navbar in the future as Google has announced that it will not be developing the Blogger platform anymore.

The Blogger Navbar Gadget Can be Customized to 6 Different Colors
along with the option to turn it off

Which Blogger Themes Have a Navbar Enabled?

Historically Blogger had the Navbar enabled by default on all blogs however these days the Navbar only displays at the top of a blog on some of the older themes like Simple, Picture Window and Awesome Inc. If you are using a newer theme or have a third party theme it will not show up automatically and would need to be enabled. If you want to know more about how to turn on the Navbar keep reading as this Blogger tutorial covers this too.

If you would like to learn how to remove the Blogger Navbar to stop it showing up I touch on this in this tutorial but for more in-depth coverage of the topic I discuss several methods in my Blogger Tutorial on How to Remove or Disable the Blogger Navbar

How To Change the Color of the Navbar / Search Bar / Menu Bar on Blogger

Below is a step-by-step walkthrough of how to change the color of the menu bar above the header in Blogger.

1. Sign in to Blogger and select the blog you wish to change


2. From the Blogger Dashboard go to Layout Menu


3. Find the Navbar section in Layout typically found at the top in the Blogger Layout Designer.


4. Click the Edit link which appears on the right side of the Navbar Gadget.






Click on the Edit Link to Open the Navbar Gadget
in the Layout Page of Blogger








Former Blogger Navbar Layout Circa 2009
Showing Position of the Edit Button




5. Select the color of your choice by clicking on the radio button on the left side of each color in the pop up Navbar Configuration window that appears.
   
   If you want to turn off the Navbar altogether click on the off radio button found at the bottom of the menu of choices in the Navbar configuration window.





Turn Blogger Navbar Off By Clicking on the Radio Button
at the Bottom of the Navbar Configuration Pop-up Window





6. Once you have made your selection click on the Save Button to save your changes


7. Click View Blog to see the effect of changing the color of the Blogger Navbar to more closely match the design and style of your blog.
   
   Or if you have turned the Blogger Navbar off you will see that the Navbar has disappeared from the top of your blog.

Summary

In today's Blogger Tutorial I have discussed what the Blogger Navbar is, its uses and what Blogger themes have it by default. I have shown you how to change the color of the Blogger Navbar on your blog via the Navbar Gadget to one of six custom choices so that it matches the color and design of your blog.

Related Links

How to Remove or Hide the Blogger Navbar with HTML
How to Change Image Sizes in a Blogger Blogspot Blog
How to Change Image Sizes in Own custom Dimensions in a Blogger Post
How to Add a Print Friendly Button to Blogger
How to Change the Date of Blog Posts in Blogger
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Easy Ways to Put Banners on Blogger
How to Add a Welcome Message to Blogger Homepage
How to Unlock or Delete Locked Widgets in Blogger