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.
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.
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> |
|---|
Preview the template. You will notice that the Navbar is no longer displayed, and (depending on your template) your contents might shift upwards to take up the space reserved for the Navbar.
[Update:
This code display:none no longer works. Those who have used this may want to try out the other 2 methods (height and visibility) instead.]
Now, try this style definition:-
#navbar-iframe { height: 0px; } |
|---|
This will reduce the Navbar height to zero, effectively removing the Navbar. You can also explore this other style:-
#navbar-iframe { visibility: hidden; } |
|---|
You will notice that your contents do not shift upwards. The space is still reserved for the Navbar, but the Navbar is now hidden and not visible.
Either one of the above codes would do. You can also combine them if you'd like. For example, giving a numerical value for the height of the Navbar and hiding the visibility will give you a margin at the top and yet without the Navbar. Choose one that best fits your blog design. If you change your mind in future, and wish to have back your Navbar, simply remove the style definition.
Search Box
If you decide to remove the Navbar, you can still place a Blogger Search Box within your site. This is one of the great features in the Blogger Navbar.
© Tips for New Bloggers
25 comments:
Hey! I went to bloggerforum.com and looked for a post like this and u wrote that u had a blog post about it, so i came here and searched for it, and now my nabar is invisible!
I used height=10 and invisible to get a space between the top and my ad.
Thank you very much for the post! :)
I combined height=0 and display=none into one statement.
#navbar-iframe {height:0px; display:none;}
Works great for completely eliminating the navbar and the gap. Thanks.
I'm having a lot of difficulty removing the navbar. I'm not sure where exactly to put the code. Could you please email me at styleitonline@gmail.com?
Thanks!
Hi Style IT
When you are at Edit HTML, scroll to where you see "/head" and insert the code before that. Click Preview first to see if the Navbar is gone. If it is and you are satisfied, you may save the template.
This worked great for me. Thanks
Cheers for this help. I was using a div stlye = "position: absolute; top: 0; background-color = "#000 etc thing to cover it up but it kept on messing up on old browsers and it also stoppped me being able to have backgrounf pictures, you one helps me lots :D cheers
You are really amazing. I'm learing so much from this blog of yours.
I have just a little questions: how do you access your editing panel once the bar is out?
I have a link to the editing panel but maybe you have a better tip.
Hi skandy
What is this "editing panel"? The "New Post" and "Customize" link? You can put these links in your blog if you'd like.
I'm having problems removing it...where exactly do I put the code?
Hi hc
You can do a quick find or Ctrl-F for "/head" and insert the code (in red) just before that.
thank you very much. i've searched high and low for how to remove this thing. i've tried many many ways and i found your site the most efficent.
thanks for this nice tip .. i want to ask question :
if i removed the NavBar and signed up with Google Adsense
can they refuse my blog because of removing the NavBar ???
thanks ..
:: Arabs Forex ::
Hi Maldino
Haven't tried so we don't know. If it is a concern to you, you may want to leave the Navbar there.
That was really useful, thank you. I installed the modified code on my only remaining Blogger blog for Kevin the Collie but despite following tehnust's suggested modification I still have a gap at the top of the page. I really would like to close that gap and get more content above the fold.
Hi Kevin the Collie
Who is "tehnust"? Did you post this comment in the wrong blog? If you have followed our guidelines here, you should not see a space above the header.
hey, i''m using a modified tic tac template, and i noticed the /head line is right before the 'content-wrapper' code. I put your code before the /head line, and I just see the text of the code above my navbar. Can you help? Thanks.
Hi JL
You can put it anywhere between <head> and </head> but after a } character.
I started to use three columns minima template. When I was using the regular version, I could hide the blogger navbar but now I cant. I tried the code you wrote but it didnt work. Is there another way of removing navbar for three columns templates?
Thanks...
Hi zarpandit
You have no blog under your profile for us to look at. Whatever we have written have been tried and tested. They apply to our three column templates as well.
Hi Bizwhiz,
With your fabulous instructions I've changed my template to a much better defined one. However, neither of the tips to remov the nav bar are working. I follow your instructions to the letter, and when I preview it, I see the inserted codes at the top, along with the same nav bar. Has blogger somehow blocked these codes from working? :(
tiddlytwinks@gmail.com
Hi Telling It Like It Is
Your blog looks ok. I suppose you are referring to your test blog which is a private blog. If your template is a standard Blogger template, the code we stated should work. Just ensure that you have inserted it at the correct place, i.e., between <head> and </head> and after a } bracket.
Can you tell me how I can add the "New Post" and "Customize" link? Have tried but am unable to add these links...
great info great blog the best!
I noticed that somebody else posted something that I actually had the same problem with....
If the words "navbar" are showing up when you preview, make sure you insert the HTML code after a }....if you dont, that will be the result....
}
#navbar-iframe {
height: 0px;
}
That is what my code looked like
bizwhiz, how do I add a new post/customize link?
This blog was very helpful to me
I have something to say ...