Four easy ways to Remove or Hide Blogger Navbar

What is Blogger Navbar? Navbar here means Blogger Navigation bar which usually appears on top of blogger default templates.

Navbar on blogger template helps one to navigate around blog with ease using some of this features

Blogger icon takes you to the

Four easy ways to Remove or Hide Blogger Navbar

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.

You can sign in and out to blogger dashboard using the Navbar.

Some custom blogger templates hides the Navbar on default but they are left to appear on some other templates.

So we will look at how to either remove or hide the Navbar from appearing on your blog when somebody visits it.

To achieve this we are going to apply manual tricks using 4 different methods.

But before we proceed on how to remove or hide blogger navbar first your advised to backup your blogger template.

How to Remove or Hide Blogger Navbar

1: Go to the Blogger Layout section. see best editing html source code tools for Android

Four easy ways to Remove or Hide Blogger Navbar

Click on "Edit" link of Navbar widget and you should be in the Navbar Configuration section.​
Click "Off" and click on "Save" button.

2: Go to Theme >  Edit Html >  Search for


And add this code just above it.

#navbar-iframe {
display:none !important;

Four easy ways to Remove or Hide Blogger Navbar

3: Go to Blogger Template  >  Customize >  Advanced >  Add CSS.

Paste the following code
#navbar-iframe {
display:none !important;

Click on "Apply to Blog" button.

4: Go to Theme >  Edit Html >  Jump to Widget >  Navbar 1
Search for the following line below:

<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>

Select and remove all those lines.

Click on "Save template" button.

I hope this tutorial help you out if it does, do like, comment and share this post thanks.

Author: My name is Omeh Collins Ogbonna am a passionate Blogger who wants to Help The World Through Technology by Solving, giving out Useful and Valuable information using my blog as the great and unique medium. We provides all Tech / Telecommunication services, How To Make Money Online, free/Cheap Datas, Andriod Smartphones, Games, 9Mobile, Tech news, iPhones, Phone Review, ICT Issues, Free Tutorials. etc. You can Contact Me or join my Social media platforms. We welcome everybody from all around the World. love you all.

Mega Empire Global Investments
Join Our Free Newsletter
Sociliaze with Us
Next Post »

Thank You For Sharing Your Feedback, We're Happy You're Here, Because We Love To Help Others. I appreciate your comments. ConversionConversion EmoticonEmoticon