How To Remove Blogger Navbar: Best Methods!

We can build our blog on blogger without having any coding knowledge. Blogger is a free blogging platform powered by Google. It has every latest feature which makes blogging easier. Just we have to know how to make our free blogger blog more suitable and professional looking. In this case today I am going to show you how to remove blogger navbar.

Many professional bloggers don’t like to allow the additional default blogger navbar on their blog. They take the decision to improve their blog’s user experience. Default Blogger navbar is not necessary for any major purpose related to blogging. So it is better to remove the navbar from blogger blog.

How To Remove Blogger Navbar?

Removing blogger navbar is very easy. I will show you several ways to remove it from your blogger blog. So chose any one method to remove it completely from your blog. Here is a step by step process for removing blogger navbar.

Method 1: Through Layout
1. Login to your blogger account and go to the “Layout” section.
2. Find “Navbar” and click on the “Edit” link.
3. A new popup will appear with different navbar style.
4. From here choose the “off” option. Click on the “Save” button.

How To Remove Blogger Navbar - Method 1

Note: Google doesn’t allow to use blogger without giving proper credit (Powered By Blogger/Navbar). This is not mandatory to give this credit through navbar. You can give this credit anywhere on your blog without using blogger default navbar. So if you remove this default blogger navbar then give credit (Powered By Blogger) anywhere else (best place is footer) on your blog.

Method 2: Using CSS
The next method to remove blogger navbar is CSS. In this way, you will be able to hide the navbar from your blog. If you give credit anywhere else on your blog then hiding the default navbar by using this CSS is not a policy violation. Simply copy the CSS code and go to the “Template > Edit HTML” section. Paste this code right before “ ]]></b:skin>”. Click on the “Save Template” button.

How To Remove Blogger Navbar - Method 2

Code :
#navbar { visibility: hidden; display: none; }

Method 3: Complete Removal
In this method, we will have to remove the complete navbar code from the blogger template. To do this, we have to find the code of default blogger navbar widget. Which will be available at Dashboard > Template > Edit HTML section. After going to the “Edit HTML” section search for the blogger navbar code and remove it from your blogger template. Now click on the “Save Template” button.

How To Remove Blogger Navbar - Method 3

Code :
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'> </b:includable> </b:widget> </b:section>

Method 4: Alternate CSS
You can try this CSS code if the above code is not working for you properly. Because many template developer declare the <div> class by navbar-iframe.
So do as you have done in the above CSS method. Go to the “Dashboard > Template > Edit HTML” and paste the CSS code right before “ ]]></b:skin>”. Then click on the “Save template” button and you are done.

Code :
# Navbar-iframe { height: 0; width: 0; visibility: hidden; display: none; }

Choose any one method from the above list to remove blogger navbar from your blogger blog. You can try every method until you find the suitable one for your blog. If there any problem to do this simple task then let me know by leaving a comment.

I love to share my knowledge and experience. I am a part time blogger and a student of Computer Science & Engineering. I am a regular web developer & SEO analyst at Upwork. You can follow me on...

We accept <a> (for making links), <b> (for bold), <strong>, <em> and <i> Tags. Spam comments will be deleted.