Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Mar 18, 2007

Digg This Story

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.

Hide or Remove Navbar in Blogger

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

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

53 comments:

Haunted TUNA said...

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! :)

technut said...

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.

Style IT said...

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!

bizwhiz said...

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.

Candace Dempsey said...

This worked great for me. Thanks

Anonymous said...

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

skandy said...

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.

bizwhiz said...

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.

hc said...

I'm having problems removing it...where exactly do I put the code?

bizwhiz said...

Hi hc

You can do a quick find or Ctrl-F for "/head" and insert the code (in red) just before that.

Anonymous said...

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.

Maldino said...

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 ::

bizwhiz said...

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.

Kevin the Collie said...

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.

bizwhiz said...

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.

JL said...

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.

bizwhiz said...

Hi JL

You can put it anywhere between <head> and </head> but after a } character.

zarpandit said...

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...

bizwhiz said...

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.

Telling It Like It Is said...

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

bizwhiz said...

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.

Ishwar said...

Can you tell me how I can add the "New Post" and "Customize" link? Have tried but am unable to add these links...

Forex said...

great info great blog the best!

World of Isaac said...

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?

srizah said...

This blog was very helpful to me

Ladyheart said...

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... =)

Jamiro-Style said...

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

Biceps brachii photos said...

Thanks for the tip.
It works here.

tobefrank said...

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?

2befrank@gmail.com said...

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?

Andrew Selbst said...

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?

Muhammad Naim @ EastBulleT said...

hey...

can teach me how to make list like -----------> beside this..

at right of ur blog...

ty...

Maxkrish said...

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.

Atty. Gerry T. Galacio said...

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.

duyduy said...

I try all the trickt but the navigation bar still there.
Maybe it doesn;t work again, like the 1st one?

las palabras mágicas said...

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

Anonymous said...

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!!!

Fredrik Mellem said...

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

BRIAsugar said...

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/

cyberarted said...

It seems it doesn't work on old blogger. Navbar is hidden but black reserved place still there :-(

k_khattra said...

Very very helpful post, I tried it & sucessfully insert the code, thanks alots!

slam said...

Saya harus banyak belajar nih dari Anda. Numpang triknya ya. Aku mo bikin template. Teman teman bisa downlaod template karyaku.

eezeehiro said...

Add this CSS definition

#navbar-iframe { display: none !important;}

/* Variable definitions

Megan and Matthew said...

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!

Peter Morrow said...

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?

lavante said...

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!

Beda said...

hi! i installed this code on the specified place but the bar still there. does this still works? thanks, your blog is so helpful.

Chuck said...

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.

Ryammm said...

Great! Finally got rid of that annoying navbar. THANKS!

weng cariaga said...

sir,

could you please help me??!
I am having error when i add the code...
what should i do?? Thanks!

Beautiful Secrets Wigs said...

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...

Beautiful Secrets Wigs said...

Oh, nevermind. I figured it out!
Thanks anyway.
Great site!

Anonymous said...

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.