January 15, 2005

Remove the NavBar

To hide the Blogger NavBar:

- Log in to blogger

- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

- paste the CSS definition in the top of the template code:

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">
...

Remove the code to show it again.

115 comments:

Alex Morganis said...

I have a blog from blogger and this tip is great! If you don't believe me look at my blog. http://www.amcptwo.blogspot.com/

Thanks so Much!

bohemiattic said...

I did this just now in only a few seconds and it worked and looks great! Thanks so much for the info, Thalia

Dante said...

great tip...Thanks

Miz said...

I hate Blogs with no Nav Bar. I just pass them up.

J Oleham said...

Thanks for the help. This is great!!!

zee said...

its so USEFUL! thxs alot! the easiest code ever..

Victor Chen said...

Though this snippet of code improves the appearance of your blog, why rip off Blogger.com with this? All they're trying to do is offer you and the internet community a free service. I opt to keep my NavBar intact.

Lord_Gray said...

lovly

~[[Esperance]]~ said...

it's very easy and it's so cool.
but really, how does it work?
and also, will i get banned for this?

Alex said...

¥€$ # thank you

Don Singleton said...

I dont really want to delete the nav bar. What I would like to do is add some icons to the Blog This entry screen. Is that possible?

Billy said...

I agree with an earlier post. blogspot.com offer a great free service - probably the best free blogger service around. I don't know, give an inch take a mile!

Quick Online Tips said...

Take care that you do not violate Blogger Terms of Service by removing the Nav bar.

se7en said...

What many people don't realize is that the search feature in that Nav Bar searches YOUR blog. If for example you wrote a post containing certain words but can't remember when you did the post, you can just search for it there and all entries that have that word in it will come up.

A very nice and handy feature if you ask me. Why ditch a handy tool like that?

okron1k said...

everyone posting their own code saying its easier... is wrong unfortunately. to make this work all you have to do is add an opening and closing tag for 'noembed'. it doesnt get any simpler than that.

Dadang Wibawa said...

It's a great trick! And now I'm trying on my blog

Meanwhile I don't think removing the navbar is violating TOS from Blogger. Unless you can show me exact clause (I've tried to search, but too bad couldn't find it). Instead what I found is, they allow us to disable the navbar. Click HERE to see help from official Blogger site.

-quoted
The Navbar appears on all freely-hosted Blog*Spot blogs, but can be disabled for users publishing via FTP. It is available in four colors, and is configured in the Template tab in Blogger's interface:

CMIIW - and I'll put it back if Blogger wants so, no big deal :-)

Amanda Brightwell said...

Thanks - works like a CHARM!

Jason said...

thanks. cool. looks greater now. great piece of info :)

http://www.jasonlim.tk

Dylan said...

I still can't figure out how to remove that one gap that is left after you remove the NavBar. The code does not work. Please help!!!

Billy said...

The nav bar search box doesn't search your blog at all. It just searches through Google when I try to use it !!!!

Nate said...

I got rid of the navbar and now am trying to move my header up to fill the space. I need help cause none of the codes seem to match my template.

blog by FatriX said...

Great InfO ! THX

Daniel said...

you can also just add these 2 lines to the stylesheet
#b-navbar { height:0px; visibility:hidden }
body { position: relative; top: -32px; }

rakel said...

cool! no annoying navbar! thanks so much for this trick!

shawing said...

uhh, im using the Tobacco Template from this site and I cannot find where to place the code...can someone help me out?

rento said...

if i use this code.. will it hide from google spider too ??
Thanks for the info :D

rento
paid-surfing.blogspot.com

¥€$ said...

No it won't

niel said...

That rocks man- thanks!!!

Lucas said...

It seems that this, now is not working. Two or three days before works but I thing that blogger.com had change the working system or something else. I think that its only time to find a new way to remove the new navbar. You can see how it's not working

here

Thanks for all

¥€$ said...

I see, I see :-/

Lucas said...

Thank you for the information.
I put a menssage in my Blog.
;-)

matius said...

Thanks you are a great leader

mastershake255 said...

TY TY TY TY that was very helpful

carol said...

i'm using the kubrick template and since i started my navbar is not showing up.

i put some space on the top, to fit the navbar. and looked for the code, it's just not there.

i don't know what the problem is. could you help me?

thanks

andy said...

You're the best! Thanks

Quick Online Tips said...

It is against TOS to remove Navbar for Non FTP using blogger users.

Athwart666 said...

great tip....
great weblog

Terri said...

The TOS for BlogSpot appears to be a litte out-of-date regarding this issue, as it still talks about ads (and mentions the discontinued BlogSpot Plus service). Never the less, under part 10, advertisements and promotions, it currently says:

"Pyra runs advertisements and promotions on BlogSpot Sites. ... 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."

Thus, if you consider the Navbar as an advertisement for Blogger, then the TOS explicitly bars you from interfering with it, i.e. preventing it from being displayed.

Then again, if you consider the Navbar as a neat little extra tool that replaced the ads (which seems to be what they're saying on the Navbar help page) you would be completely within you rights to hide it. They do say, "The Navbar appears on all freely-hosted Blog*Spot blogs," a wording which suggests that their intention is for all free BlogSpot users to display it.

In sum, the TOS does not appear to be clear on this issue, but keep in mind that they also reserve the right to terminate your account at any time, for any reason. I certainly don't think they would do so in this case, but I also think that, out of appreciation for their free service you should show the Navabr unless you've got a really compelling reason not to, or tons of links back to Blogger elsewhere in your site.

eftim said...

yes.....very good tip

Janitux said...

Muy buena ayuda,esa navbar le quita estilo a las paginas.
Mi blog es un ejemplo vivo http://janitux.blogspot.com

KiD said...

apparently, i downloaded a template that doesn't have a NavBar. can someone teach me how to add a NavBar on my header?

Nicholas said...

Works great, thanks!

Mel said...

Thank You! I have had my blog for 4 years and when the damn nav bar just decided to be there you couldn't see my links anymore! I am so glad I found your site! T H A N K Y O U

` s a n said...

wow. cool code! thanks! =D

Desi Friends said...

indeed this is a great tip, many thanks for sharing it here, i've been looking for it since october.

A-League said...

thanks. this should be tick-box option.

cheers

Rafiday said...

The best code ever, I searched for it and found this site on the top of the results, works like a charm, see for yourself: http://www.mizco.blogspot.com

Jim said...

I have been wanting to get rid of that bloody bar for so long. Thanks

koji said...

let's say i do not want to "remove" the navbar but rather "re-position" it at the very bottom of the page, is there any code to do that?
thanks!

John MacDonald said...

Lets say i just wanna change the colour of the navbar. Is there a code to do that...
Thanks. By the way your site is very helpful...

TTFN

bolan said...

This is very cool.
------------------

trungson said...

Blogger now allows you to turn it off and not having to apply a trick like this.

ColinM said...

This really allows you to maximize the space. I like it alot.

Being used at Tech by Colin

Gaby de Wilde said...

The bloger help page says it replaces the advertisement. If you put the advertisement back you can remove it. I mean, replace the adds with nothing? Ofcourse it looks much better but I don't want my blog to be deleted kind of?

Mauricio Vera said...

Well done bros!

Forum said...

yes,
who wants this navbar....

Ashley said...

Thanks, this code works very well. The NavBar was covering up the title to my blog, and now you're able to see it!

Naïve Waif Dénouement said...

Hey! really, I'm just gettin' started with your tricks and not to say that they are really really easy... well, just thanks.

By the way, visit http://omegaportal.blogspot.com/
the best site (after this) that you had seen

jimbo said...

Incredibly easy. Thank you!

Alex said...

As one or two have said,the Blogger bar is not there to annoy Bloggers about how their design looks. The Nav bar is just that, a Navigation bar. It gives other users the freedom to browse through Blogs at "their" leisure, and skip past Blogs that are simply crap. Remove their means of jupming Blogs,and you have an irritated user on your hands very quickly. As soon as i stumble onto one of those Blogs that blasts an Mp3 in my face against my will,or jams up my PC with all kind of wacky graphics and the odd bit of text here and there, the last thing i want is for the Navigation bar to be missing. Sploggers have also abused things with such a code, and remove the means by which to "Flag" such scam linking sites which divert you to other sites when you arrive on them. In other words, they continue to waster Bloggers time and use up the space for proper Blogs because nobody has the means by which to notify Blogger of such fake Blogs.

The moment i see that someone has "forced" me to remain on their Blog against my will by removing the NavBar,then i simply close the window immediately. No exceptions,because it shows insecurity on their part. Allow Bloggers to skip a Blog if they so wish to. Often you have to sift through pages of rubbish with the Navbar, in order to find a good Blog sometimes. Blogger is offering a free service, and that bar is hardly intrusive if you ask me. Up to folks really. They can remove the Bar if they want,but you would be suprised how many people are irritated by that and will close the window immediately.

Anonymous said...

For those interested in repositioning the navbar to the bottom of the page, try pasting the following after your body tag:

<style type="text/css">
body { position: relative; }
#b-navbar {
position: absolute;
top: inherit;
bottom: 0px;
margin-bottom: 0;
}
</style>

daigoro said...

or even better how about just moving your actual website under the navbar at the top using absolute positioning :)

Simply position your entire blog inside a wrapper say 100px at the top like this.

position:absolute
top:100px (change this until your blog is where you want it)

Then your blog will start under the navbar and titles and stuff should not be covered up. And more importantly you won't be ripping or pissing anyone off.

think about how the navbar must work..... is it not itself absolutely positioned I wonder .. Hint hint ;)

Joomli said...

Is this allowed by Blogger?
Will my blog not be deleted?

berlinerin said...

Oh, very good Tip!
Thanky very much.

Ides said...

very cool code and it is working
thank you!

Fred said...

Thank you. I publish via FTP and the Navbar mysteriously reappeared one day. At the same time, the option to switch it off disappeared.

This happened just after I started eyeing up WordPress...

Reza said...

I have it via FTP on 2 Blogs and everything is ok. Thank you very much.

Funny said...

I have tried it on my
Berlinlog
and it worked very good. But I removed it back, because some good visitors come from the navbar....
And I also use the navbar always.

eCarda said...

Thats a very very good Tip!
I will try it now. Thank you!

Gaby de Wilde said...

The tos clearly says you may not remove advertisement in any way.

http://www.blogger.com/terms.g

you can still type javascript:flag() in the adress bar to flag a blog. But I think google already marks them as splog automatically.

berlinerin said...

Thank you Gaby de Wilde.
I will reinstall it now,
it is better I think.
I have read the Tos now.

Jutta said...

Oh yes thanks
I will open a new blog and try it.

Rocco said...

Hi guys

I am so new on this and don't understand anything you're atlking about.

I tried to copy that thing on the template html thing but doesn't do anything and it is because I may not pasting it where it should but I don't understand that html at all.

Should I really take a course on html to have a blog?

So where do exactly have to paste ur tip?

Can u help me?

Also I would like to put a banner on my blog and some avatars and icons.How can I do it?

Anybody can help me with that?

Thanks

schmutzie said...

Thank you so much for the tip. I hated being forced into incorporating the navigation bar into my template. I'm free!

Anonymous said...

"For those interested in repositioning the navbar to the bottom of the page, try pasting the following after your body tag:"


Exactly WHERE after the body tag? I see lots of body tags in my template.

Great site for help.

Rose DesRochers said...

Thank you. This worked very well.

Rose DesRochers

pix43 said...

worked for my pix43 pix blog , thanks !

jmbt said...

THX A LOT..... :) :)

Holly said...

place it after:
..."style type="text/css"...
and before .../style...
ok?

Flangie said...

How do I get to see who has made each comment on the blog? Have I done something incorrectly?

Susan Records said...

I like the Navbar and use it myself. As someone above mentioned, though, I would like more color options for it than Blogger offers.

dp said...

i dont understand where your suppose to put the code, coudl someone please help me

yung said...

thanks, guy! my blog adopted this tech.

Someone said...

According to this, removing the navbar IS a violation of TOS.

http://buzz.blogger.com/2006/03/search-policy.html

Sharon J said...

I think it's only fair the navbar should stay. If they didn't want us to have it there, they'd give us the option to remove it on their hosted blogs, wouldn't they? I honestly think that anybody who wants to get rid of it should get their own domain and webspace and publish their blog via FTP rather than stealing advertising away from a free service.

Anonymous said...

thanks a lot!!

Mortgage said...

It's easy to do, but after thinking about it I decided to leave the navbar in. Nice work though!

Anonymous said...

Thank you thank you thank you. When the blog is not on blogger.com, I think displaying their link button is enough.

Sigsputnik said...

i've just reinstated my navbar so i don't irritate casual surfers to my blog. if that's how they come in, i want it there when they leave so they feel compelled to return! cheers for the good discussion.

http://myminitruck.blogspot.com/

Archimedes Trajano said...

The problem I have with the navigation bar is it is not XHTML compliant. It looks like a simple enough fix, just remove the "name" attributes on tags that do not allow it.

The Masta said...

I loved the code
here's my blog with it http://www.themastasblog.blogspot.com

ycc2106 said...

Nice layout!

Note again: UNLESS YOU PUBLISH YOUR BLOG VIA FTP, THE NAVBAR CANNOT BE DISABLED.
but it dosen't say what you risk by doing it.(Blogger help)
Here I've listed different methodes to hide or move the blogger bar: Hide the Blogger bar (hi gaby! :) )

Anonymous said...

There's a difference between "cannot be disabled" and "may not be disabled." I think they mean that they do not offer a way to disable it (it "cannot" be disabled with any Blogger-supplied tools). Many Blogger users have disabled it over the past couple years, and no action has been taken by them. If they really didn't want people doing it, they would clarify the language in the Terms.

Crys said...

Its totally awesome!

psaslboy said...

I would not concider the navbar as an advertisement. Google doesn't make any money by displaying the navbar whatsoever. All it does is give you the option to go to a random blog and search blogs.

-=-:Marc:-=- said...

Muy buen dato he, me sirvio para sacar esta barra un tanto molestosa que se encontraba en mi blog. Muchas gracias por el bit.
http://www.zonabyte.blogspot.com/

Blakecioran said...

gracias

Brian Nation said...

Several people have pointed out that Blogger requires that you leave the navbar intact unless hosting on your own server. I'd like to point out that the "Next Blog" link frequently takes you to porn sites so I would get rid of it.

efreelist said...

This is a wonderful tip Thanks -http://efreelist.org

Esther said...

Thank you very much for this !! It's very helpful (Otherwise the navbar would mess up my blog with the divs.) Wonderful work !!

lamanary said...

n sabia ma tinha ke ser um kosa rapd y facil.
tanx

Azhar said...

Thanks for the code

Tini said...

Cool hack for those who're looking for it... But listen, once in a very shinny morning, your friend gave you a $25 as per your request. Unfortunately, you didn't say thank you and even asked for another $25... worst, you stole that extra 25 bucks when he/she said no! Do you think that's nice?

Thank you for reading :)

Akie said...

Tis script doesn't seem to work in Blogger/Google beta version.

Plse help.

Thanks in advance.

entrix said...

Thanks for the tip.

Christina in GA said...

It's not working any longer with the Beta version and I can't get back to the regular version.

I've tried to bump my template down a bit so that the title jpg is under the bar, but it still cuts off the top of the picture. I've tried some suggestions from blogger and a few other places, like changing the margins, but then part of my template code will show up between the navbar and the top of my jpg picture.

I guess they have finally found a way to make us keep the bar, I just wish I could figure out how to keep it from cutting off my picture.

epirater said...

I Have edited the Script to work with the new google/blogger beta version, simply edit the existing script from #b-navbar to #navbar-iframe and it will work perfectly;):)

Jon Esquire said...

thanks, i was lookin for this

Harry said...

*** I HAVE TRIED THIS ABOUT TEN TIMES AND IT STILL DOESNT WORK!! HELP!!!

y o g e s h said...

Good job dude!

the ivisible veil said...

SOOOOOO COOOOL Thank you.Now my page looks so good!

Mike Weston said...

Fantastic, it works!!

Look at my site NO NAV BAR:

http://www.chao-vietnam.blogspot.com

Anonymous said...

muchas gracias, me sirvio de maravilla

Sa3eed said...

gr8 info espically when i hav a google seach bar thnx 4 all

anyong said...

yeah its work in my blog http://korean-languages.blogspot.com learn korean languages-belajar bahasa korea dengan percakapan lengkap