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 navbarBloggers 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
<style type="text/css">Technique Two: This is another simple way to remove the Blogger Navbar but it will not form valid HTML. Replace your <body> tag with the following code and hide will hide the Blogger navbar.
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
</style>
<noscript><body></noscript>Technique Three: Similar to technique two for hiding the blogger navbar but doesn't form valid HTML. Replace your <body> 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.
bodyIf this doesn't remove the gap created with Blogger Navbar, try the following CSS hack
{
margin-top:0px;
}
bodyIs removing the Blogger Navbar legal ?
{
margin-top:0px;
position: relative;
top: -50px;
}
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.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.
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.
Find this article at: http://labnol.blogspot.com/2005/12/disable-hide-blogger-navbar.html
web: http://www.labnol.org/ email: amit@labnol.org
Reader Comments
Just tried technique #1 and it does the job. Thanks very much for providing this.
Written on 16/1/06 6:11 AM
Thanks! You helped solve a crucial problem for me!
Written on 10/5/06 10:58 AM
Thanks, I messed up the nav bar so it diden't extend fully across the page. It was disrupting the whole design of the blog. Then I tried to get rid of it. You really helped me! Thank-you!
Written on 13/7/06 11:38 PM
Technique three worked really well for me so thanks!
Written on 16/7/06 1:22 AM
I've been trying to get rid of that navbar at the top of the screen for hours...found your site...then bang!
Well..there u go...
Your a legend!!! Thanks very much!!!
Written on 16/7/06 9:00 AM
I am so thankful to have found this.
But I am just brginnin g with HTML.
Where do I post the code within the Html???
Help.
wantzjt@gmail.com
Written on 19/10/06 11:54 PM
Hi,
I'm using blogger beta templates. I tried to add the code you described but it didn't work. It still show the navbar. What should I do?
Thanks.
Written on 28/11/06 10:45 AM
I tried technique no.1, it does not work, guessing where to place the "style" tag is the key to this, so let us know where to place this would be a great help.
Technique 2 does not work either since you cannot save an unformed HTML.
Is this right, or I simply didn't know how to do.
Written on 21/12/06 2:13 AM
you can even try this
< noframe> < body> </ noframe>
Written on 22/12/06 7:52 PM
Blogger just launched it's new non-beta version, and these hacks don't seem to cut it. For example, there aren't any style tags, and there isn't a <body> either. Has anybody cracked the new system? Many thanks!!
Written on 6/1/07 12:16 AM
Thanks a lot! I'm currently running several blogs, and it was infuriating having to work your design around the navbar, especially due to its limited colour schemes. I now have a much cleaner and professional looking blog. Well done
Written on 11/1/07 12:17 PM
I think the new blogger templates just call it navbar, not b-navbar. After a little fumbling around I got it to work. Thanks.
Written on 19/1/07 9:05 AM
Thanks awaller,
Your tip works! Just hate that navbar, it hurts the eyes!!
Written on 25/1/07 12:42 PM
Still can't remove the navbar!
Written on 27/1/07 2:49 AM
I can't track down any of the tags mentioned, as someone else commented above...and trying to wrap the body tag kicked it back to me when i tried to preview...
any thoughts?
Written on 27/1/07 5:05 AM
I need help to remove the navbar!Please!
klajdi2@gmail.com
Written on 27/1/07 3:42 PM
Where do i post the code in Technique #1? at the beginning of the code? or at the end? or somewhere in the middle?
Written on 2/2/07 6:22 AM
yes, in new blogger, its navbar, not b-navbar.
just use this:
#navbar {
height:0px;
visibility:hidden;
display:none
}
Written on 10/2/07 6:46 PM
Thanks very much for this solution! In the end I had to go for option 2, I'm using the new version of blogger. Thanks again.
Written on 12/3/07 4:13 AM
For New blogger this code will work:
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
Written on 28/4/07 3:01 PM
Thanks Gagan Bassi~
#navbar-iframe
{
height: 0px;
visibility: hidden;
display: none;}
This really works~ i tried all the above solution but doesn't work. But yours does. Thanks so much!
Written on 5/5/07 8:58 PM
I think I read some where in buzz.blogger.com that blogger has the sole right to delete any blog without the navbar although I haven't seen any blog deleted for this reason but still prevention is better than cure
Written on 11/5/07 2:57 PM
http://buzz.blogger.com/search?q=navbar
""We consider it a violation of the terms to modify the Blogger navbar, but that's not what was reported to have happened here.""
I've removed my Navbar though
Written on 25/5/07 2:27 PM
The code below works for the new Blogger Beta but it slightly messed up my header layout. I had to increase my header image height by one pixel to close up a gap after applying this hack.
#navbar-iframe
{
height: 0px;
visibility: hidden;
display: none;}
Written on 25/6/07 7:36 AM
I just use the drop down option in the templates section to turn off the navbar. Don't want to hit next blog at work and have some "BAD" site come up! I love css, don't get me wrong. It is my only true love, however sad that might be.
Written on 22/7/07 7:56 AM
looks like that drop down box option is only available when you are posting to another ftp location.
.
that sucks
.
oh well this bit works great!
#navbar-iframe
{
height: 0px;
visibility: hidden;
display: none;}
Written on 22/7/07 10:00 AM
for the first technique, this bit actually works better, the first only works on i.e.5+, this one works on all, including mozilla firefox 2.0
#navbar-iframe
{
height:0px;
visibility:hidden;
display:none
}
Written on 23/7/07 9:12 PM
Hi Amit,
That's a great hack. I can see you have applied it to your own blog.
I don't wanna remove, but want to move it to bottom. How do I do that?
Thanks.
Written on 20/9/07 11:33 AM
For Beta Bloggers: put the code below the head, in the begining of the html.
Written on 30/9/07 2:03 AM
We're just starting out, and don't know much about HTML. Do you put that code below the word head (it has <> around it) (which is about 8 lines from the top)? Or do you put it at the very top of the code?
Written on 6/11/07 2:31 AM
Good article, but old.
I'll say that removing the navbar is against the rules - now.
@heather: This article is based on the old Blogger.com.
If you use the new Blogger.com there's new lines to be added.
Written on 12/11/07 11:31 PM
Hi Amit, I've been actively following your blog (via e-mail subscriptions)for quite sometime now, but haven't really commented on any post. So, let me take this opportunity to let you know that you're doing great work! Thanks for sharing all your knowledge through this media.
I've got one quick question on this post that I'd like to ask -- Do the tips that you've mentioned above, work for the new beta blogger that uses XML(I guess it's XML, please correct me if am wrong)?
I'd be glad if you could throw some light on this when you get a chance. Thanks !!
Written on 12/12/07 9:53 PM
This post has instructions on how to remove the navigation bar of the new Blogger:
Hide Navbar in New Blogger
Written on 12/12/07 9:57 PM