How to Remove Navbar and Navbar Space in Blogger

What is Navbar?
Navbar stands for Navigation Bar generally present in top of a blog which help visitors navigate the blog better.
Navbar is present in all blogger blogs by default. Now if blogger is providing navbar to all blogger blogs it must have some advantages. But many bloggers prefer to remove it, so it must have some disadvantages as well.
Advantages

• Navbar contains a Search box at the left, which can be used by your blog visitors to search your posts.
• At just right of the Search box Navbar has a Google +1 button which your visitors may use to recommend your posts.
• ‘More’ option is available just right of +1 button. Clicking on ‘More’ drop downs a menu which has ‘Share by Email’, ‘Share with Facebook’, ‘Share with Twitter’ and ‘Report Abuse’ Option. First three can be useful for you but if you are a blogger who steals other's content, ‘Report Abuse’ can do much harm for you.

Disadvantages

• It takes some space above blog.
• ‘Next Blog’, ‘Create Blog’ and ‘Sign In’ option distract users from your blog which can also increase bounce rate a little.

Now you know have good knowledge of Navbar, now it’s your decision if you want to remove Navbar or not?
What! You decided to remove it. Then, let’s get started..
Now will be explaining, how to remove Navbar and after that How can you Remove Navbar Space left above the header after removing Navbar from your Blogger (blogspot) Blog?

Removing Navbar

Removing Navbar is quite easy and do not take more than a minute.

Steps

1. Log in to your Blogger Account and Open your Blog.
2. Click on ‘Layout’ option in the left sidebar.
3. Click on ‘Navbar’ which is present in the top right of page layout.
4. A pop window will appear.
5. Select ‘Off’.
6. Click on ‘Save’.
   

Now Navbar is removed from your blog, but you will notice that the space it occupied earlier is still present. Now you must remove it. How can you do it? It’s quite easy.

Removing Navbar Space

Let’s jump into the steps to remove navbar space.

Steps

1. Click on ‘Template’ option present in the left sidebar.
2. Select ‘Customise’ option.
3. In the top left of page, Select ’Advanced’ option.
4. Then more options will appear on its right.
5. Scroll down and Select ‘Add CSS’.
6. Paste the following code in the space provided for CSS.

#navbar-iframe {display: none !important;}
body .navbar {height:0px;}
.content-outer {margin-top:0px;}

7. Select ‘Apply to Blog’.
8. All Done! Check your blog and Navbar space must have removed.
9.  
   

Going through these steps will not take more than a couple of minutes. 

I have explained each and every step so that you don’t get any problem. Even then if you have any problem removing Navbar or Navbar space let me know, I’ll try to get back to you as soon as possible.

Share This