How to Hide or Remove Blogger Navbar

How to hide and remove the Blogger navbar with simple CSS, How to Turn Off Blogger Navbar and why you should remove and disable the blogger navbar

Bloggers automatically inserts a little navigation toolbar (called Blogger Navbar) in all pages of blogspot blogs. This Blogger Navbar gets tucked into the top of the browser window and is supposed to add new (?) functionality to each blog. Blogger Navbar is 50 pixels high and spreads across the entire width of the browser window.

1. There are two buttons on the navbar that point to the Blogger Homepage. Too much of self-promotion.
2. The NextBlog button takes visitors to another recently-updated randomly selected blog on blogspot. But what if clicking the NextBlog button takes my innocent readers to a blog with adult offensive content.
3. The Search Blog Form is not integrated with my Adsense for search account. I want visitors to use my custom Google site search form that is monitized by Google Adsense.
4. The existing Blogger Navbar colors do not gel with my custom blogger theme.
5. The BlogThis! pop-up link is already availble when I enable Blogger Backlinks.

To hide the Blogger Navbar, try any of these CSS techniques. [they should work with Blogger Beta or Blogger 3.0 as well]

Technique One: Insert (copy, paste) the following CSS code in your Blogger Template to disable the Blogger Navbar

Technique Two: This is another simple way to remove the Blogger Navbar but it will not form valid HTML. Replace your &ltbody> tag with the following code and hide will hide the Blogger navbar.

Technique Three: Similar to technique two for hiding the blogger navbar but doesn’t form valid HTML. Replace your &ltbody> tag with the following code and hide will hide the Blogger navbar.

I use the first technique for this weblog as it results in well-formed HTML. Remember GoogleBot hates pages that are not constructed with well-formed HTML. But hiding the blogger navbar gives rise to another problem. You might notice some empty space in your webpages between the top edge of the browser window and your blog content. We will again employ a simple CSS tweak to remove the gap at the top.

body
{
  margin-top:0px;
}

If this doesn’t remove the gap created with Blogger Navbar, try the following CSS hack

body
{
  margin-top:0px;
  position: relative;
  top: -50px; 
}

Is removing the Blogger Navbar legal ?

The Terms of Service for Blogspot.com do not mention anything about Blogger Navbar but it does state a word about the discontinued Blogger AdBar which was previously displayed on freely-hosted Blog*Spot blogs.

By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions.

You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site is subject to change.

Since it is not mentioned explicitly in the Terms of service, it remains doubtful if removing and hacking the Blogger navbar is any violation of the Blogger terms of service. Lets say we are not “removing the navbar” but only “hiding the navbar” or we could even re-position the navbar to the bottom of the blog. Get rid of the blogger nav bar.