The blogger navbar which is included by default on all new blogger blogs is something that many people wish to remove. Earlier, one had to edit the HTML code to achieve it but now, one can do it without fiddling with any codes. But that doesn’t work perfectly. It removes the navbar but not the space occupied by it because of which ones sees some empty space on the top. In this post, we will first see how to remove the navbar using the options provided by Blogger, the problem it causes and how to remove it by adding some CSS code so that empty space is not visible at the top of the blog.

Navbar Present

Navbar Present

Removing Blogger Navbar using the option provided by Blogger

Go to Layout.

Click Navbar on the top right corner in the layout window.

A pop up will open where you can choose the navbar style. Select None and click Save.

The Problem

Now, when you open your look at your blog, you will see that while the navbar has been removed, but space is still reserved for it. Ideally, the blog title and the remaining page should have moved up but they haven’t.

 

How to solve it

Follow the procedure described above of removing the navbar and then continue with the steps below.

Go to Template -> Customize

Select Advanced -> Add CSS

If you have made any changes in the past, then you might be having some code in the white text area. Add the following code at the end of the existing text.

.navbar {
height: 0px !important;
}

Click Apply to Blog.

The result

Open your blog again. You will see that the blog title and other contents have moved up.

How it works?

The Navbar code looks something like

<div class="navbar section" id="navbar">
... Some code
</div>

One of the styling rules for navbar specifies its height as 30px.

.navbar {
height: 30px;
}

When one removes the navbar using the Blogger options, the code for navbar changes to

<div class="navbar section" id="navbar">
</div>

Note that the div element still remains. Because of this an empty div of height 30px is shown at the top of the blog.

In the custom CSS that we have added, we specified the height as 0px and marked it as important which will override the 30px value and hence it won’t occupy any space.