How to Remove Navbar from Blogger Blog

Posted by VP on 8/21/2014

"A Blogger Tutorial discussing about methods to remove/hide the top navigation bar of the Blogger Blog"

Remove-Blogger-Navbar-Tutorial

Blogger Navbar will be helpful in so many ways and lets you sign in to your blogger account and edit the blog directly from your blog. Also it increases your blog visibility by adding your blog to the blogger's blog list and there is a lot of chance for anyone to discover your blog by clicking on the "Next" link provided on the navbar. You can even search for your favorite blogs too.

Even though it has several advantages, its design is old school and makes your blog looks less professional. Also it wouldn't fit with the rest of the blog appearance if you have customized your blogger template.

There are two methods by which you can remove the Blogger Navbar.

Method One: Remove Blogger Navbar through Layout Interface

Step 1: Login to your Blogger Dashboard and goto Layout. In the right side panel, click Edit on the Navbar section.

Remove-Blogger-Navbar

Step 2: In the Navbar Configuration window, select off and click Save.

Blogger-navbar-configuration

That's it. Now check your blog and the navbar should have gone. There is one limitation to this method. Even though you cannot see the navbar now on the top, there will be some space filled by the background color between the header and the top of the browser window.

If you don't want this space before your blog header area use the second method given here which is a single line of css code to remove the navbar and the space above the header.

Method Two: Remove Blogger Navbar through CSS Code

Step 1: Login to your Blogger Dashboard and goto Template » Edit HTML.

Remove-Blogger-Navigation-bar

Step 2: Click inside the template editor and press Ctrl+F. In the search box, type ']]></b:skin>' and press Enter.

Blogger-Template-Editor

Step 3: Now copy paste this code above the line ]]></b:skin> and click Save.

/*remove the navbar*/
.navbar {
    display: none;
}

Note: It's always advisable to use comments when you are modifying the template. By this way you leave a footprint of what you have changed and will be useful in the future if you want to update it.

Refresh your blog and you can see that both the navbar and space above header had been removed. Have any queries? Let me know through comments.