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
53 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
Hello... Such a nice tips! I have just tried into one of my blog - wutagirlwant.. but I don't why the navbar is still visible. Please help! TQ... =)
hi, and compliments.
I've noticed that the code you wrote didn't worked for me.
Searching the internet, I've found this working code, to put BEFORE
/* Variable definitions:
#navbar-iframe {
display: none !important;
}
Thanks for the tip.
It works here.
Hi guys congratulations for the great blog.
I got the same problem of "Telling_like_it_is".
The navbar doesn't go away.
Mine is a standard blogger, at least, I think so.
It doesnt work if I paste the code in "head", where should I paste it?
I had asked you how to remove the navbar since I have the same problem of telling_it_like_it_is .
I've included email and blog if you need it.
Are you going to respond me?
I tried the modified code and it didn't work. I put it right above the "/head" line. What happens is that a space opens above the navbar, irrespective of the size of the "height" spec. Any suggestions?
hey...
can teach me how to make list like -----------> beside this..
at right of ur blog...
ty...
I'm having a lot of difficulty removing the navbar and to create a left bar in the template. Now I resolved the problem using the information given by u.
Thanks for all, It's a wonderful blog with lot of information for new bloggers.
Hello! I need and want Blogger nav bar in my blogs. Can someone please tell me why the nav bar is not displaying properly in my Salt and Light blog www.-salt-and-light-.blogspot.com ? Thanks.
I try all the trickt but the navigation bar still there.
Maybe it doesn;t work again, like the 1st one?
Hello,
I've just removed the Navbar from my blog. Until this moment I had no idea of what Navbar was. You make it all sound easy, and that's a privilege of a very selected (and generous) few.
Thanks
Your site has a lot of good information and I, as a new blogger, really appreciate it!!! However disabling the back button on my browser is really rude!!!
Hi!
I have done this just like you're saying, but it doesen't work for me. I find this strange, since all your other tips are working qite well
I have added the navigation bar but now, it is not aligned with the header image. Any way you could help me? Thanks
http://briasugar.blogspot.com/
It seems it doesn't work on old blogger. Navbar is hidden but black reserved place still there :-(
Very very helpful post, I tried it & sucessfully insert the code, thanks alots!
Saya harus banyak belajar nih dari Anda. Numpang triknya ya. Aku mo bikin template. Teman teman bisa downlaod template karyaku.
Add this CSS definition
#navbar-iframe { display: none !important;}
/* Variable definitions
Hi. I am trying to remove my navbar, and I can't figure out how to type the HTML code in red. I read this on Blogger:
http://help.blogger.com/bin/answer.py?answer=46871
But I couldn't get it to work. Please help!
I have searched high and low for a way to remove the navbar, but nothing has worked for me so far. I always follow the instructions carefully, but every time I insert the code and then look at my site again, it will just display the code in a space above the navbar. Can I get some help?
I have something to ask. When i put up the nav bar, below the header and inserted the url links, clicking on the links lead me to this msg above my post..
showing posts with label Tim n Sher's Garderobe. Show all posts
How do i remove this? I have seen yr links and they do not auto publish this when u click a post page.
Thanks!
hi! i installed this code on the specified place but the bar still there. does this still works? thanks, your blog is so helpful.
None of these methods work anymore, or at least not for me. I am using Rounders 2 template and have searched forever tying to find these variables and non are listed. Any help? I can not find #navbar in my html at all i've searched with CNTRL F to death with no luck. Downloaded my template, searched it again and no luck.
Great! Finally got rid of that annoying navbar. THANKS!
sir,
could you please help me??!
I am having error when i add the code...
what should i do?? Thanks!
Hi there!
Thanks for the tip! It worked great- nav bar gone.
....But how do I "Add post" or "customize" now?
Probably should have thought about that before I removed the bar...
Oh, nevermind. I figured it out!
Thanks anyway.
Great site!
HI IM MADDY FROM INDIA..I WANT TO KNOW HOW CAN WE GIVE OPTION TO USERS TO DOWNLOAD FILES DIRECTLY FROM OUR WESITE or BLOG.
ex: by one click user can download file which is uploaded in googlepages.
I have something to say ...