Technology template: Hide or Remove Navbar in Blogger

Wednesday, January 23, 2008

Hide or Remove Navbar in Blogger

The Blogger or Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.
navbar The Navbar can be disabled for users who publish contents via FTP, but it will appear on all freely hosted BlogSpot blogs. While the feature is undeniably useful, some people find that its position at the top of the page looks obtrusive even with a choice of 4 colors. Some therefore pick a template with a black background to blend well with a black navigation bar. There are also parents and educators who find the 'view random blogs' feature inappropriate, as their children may inadvertently view objectionable blogs.

Nevertheless, this article is not a discussion on the merits or demerits of a Navbar. That is for you to decide. Here, I am assuming that you have made a conscious decision to hide or remove the Navbar. Having so decided, this is the guide on how you can do it.

With Classic Template:

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

<style type="text/css">
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
</style>

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.

<noscript><body></noscript>

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.

<noembed><body></noembed>

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

New Blogger Template ( Blogger Beta)

Log into your dashboard, go to Template -> Edit HTML. Scroll to anywhere on the template and insert the following CSS style definition in red within the head section.

#navbar-iframe {
display: none;
}
</head>

or:

#navbar-iframe {
height: 0px;
}

or:

#navbar-iframe {
visibility: hidden;
}