How to Hide, Disable, Remove Blogger Navbar

How can you hide, disable or remove the Blogger Navbar, a navigation and search bar on top of all blogspot blogs on Blogger. Blogger navbar has several useful features and different colours, but sometimes it may not blend with your template, and give you an unprofessional design.

Many bloggers have asked me how to remove this Blogger navbar. Remember, Blogger Navbar can be disabled for users publishing via FTP as per Blogger Terms of service. For free Blogger users, not publishing via FTP, you cannot disable the Navbar. So it is best to confirm with Blogger support that you can indeed hide the Navbar before proceeding to do so. You do not want your blog banned by them for such a small issue. I take no responsibility for the same.

Navbar in Blogger FTP Blogs

Now if you are publishing by FTP, some tips are available on other websites to which I point you.

Turn off the Blogger Navbar – the best and official way – Go to Template, and now a new option “OFF” appears in the drop down list of “Change the Blogger NavBar”. Just select it and republish your blog.

To hide it in custom templates published via FTP is add style="margin-top:40px;" to the topmost element of your Template. (i.e. <table> would become <table style="margin-top:40px;">)

Hide Blogger Navbar in Custom Themes

For all other custom themes, the best way to hide the blogger navbar is add the following code to the HEAD section of your blog HTML.

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
Share with friends

28
Leave a Reply

avatar
25 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
25 Comment authors
AyanarifMasturahDoriansunah suka sakura Recent comment authors
  Subscribe  
Notify of
Dio Bach
Dio Bach

Alternatively, just select Off in the Change the Blogger NavBar drop down – located on the template section of your blogger settings pages. Its a lot less faff! :)

Christina
Christina

I don’t have an option to turn off the navbar in templates, probably because I don’t upload via FTP.

I have tried some of the above tips and they aren’t working for me, I’m not sure what I’m doing wrong. When I try to adjust the margins, I get pieces of my template code between the navbar and my title jpg. The blog also looks worse in IE than Firefox.

Rob
Rob

This sounds very helpful.
Can I find some more details about it in Blogger Terms of Use?

wie
wie

all do not work in new blogger

CK
CK

Just add the below at template header. I work for me in new Blogger as well (both Firefox 2 and IE 7)
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Ayan
Ayan

Thanks for sharing, very simple and working!

Nikos Apostolou
Nikos Apostolou

I tried everything but nothing works!
Please help me!

stevpan@gmail.com
stevpan@gmail.com

I checked the blogspot page and found you only need to disable the navbar div in css style.
e.g. this code could hide the navbar too.

#navbar{
height: 0px;
visibility: hidden;
display: none;
}

Tim
Tim

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

THIS WORKS!!! Thanks!!!!!!

Daisy
Daisy

#navbar-iframe {

worked for me. i tried

#b-navbar {

but it didn’t work.

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Normand
Normand

Before the Body {

just add

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

blogtech
blogtech

is removing the navbar against the terms of blogger? not sure about that, though. to be safe, does anyone know how to make the navbar’s background transparent? at least if we can’t remove it, we can still make it more appealing with our layouts.

TECH
TECH

This will move it to the bottom:
#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}

Darren Ferneyhough
Darren Ferneyhough

great tip!

works for me – I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site – the nav bar would ruin the effect, so it’s great that this tip works!

kimiaj08
kimiaj08

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

This one is ok!

Sakura~~
Sakura~~

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

it hid my navbar alright… but instead, now i see the
words #navbar-iframe { height: 0px; visibility: hidden; display: none;
instead :(

QuickOnlineTips
QuickOnlineTips

That text has to go in the CSS and remember to close the brackets.

Chris
Chris

Thanks a lot, the last tip works great.

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

Marta
Marta

You guys who leave a code, on the comments, you’re so nice. Thanks.
And the post is amazing, best ever and you care to updated it yet.

sam
sam

i think it is simple to hide navigation bar but i suggest do’nt hide it,it help in navigation also to visit.
by the…
]]>
Find out above code and write above the following code..
#navbar{display:none}
.And enjoy your beutiful blog.

sam
sam

find below code.
]]></b:skin>
write above this code. #navbar{display:none}

sorry in above comment full code had not appeared..

Money Maker Info
Money Maker Info

I used this code:

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

…and works properly. Thanks.

JK
JK

Hello! Is there a way to change the background color on the navbar, to any color you’d like?

mohit
mohit

hiding NV is simple..

#navbar {
display:none
};

sunah suka sakura
sunah suka sakura

thanks~ it’s hidden already!

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Dorian
Dorian

Here’s some CSS to remove all the blogger-ish links on the left, leaving only the ones on the right which are useful to you as the blog author: #b-navbar #b-navbar-logo, #b-query-box, #b-follow-this, #b-share-this, #b-flag-this {display: none;} And here’s some code for making the bar background and border disappear, so it’s just those links: #b-navbar #b-navbar-bg {display: none;} Now if anyone has any ideas on restyling that navbar with CSS, just to remove the bottom border, that’d be great. Here’s what I’ve been trying: div#navbar div#b-navbar { border-bottom: 0px none #FFF; } I can’t seem to get the selector to take… Read more »

Masturah
Masturah

Thanks for the tips.
Works like a charm =)
I use the code below

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

arif
arif

I have been searching for this long time and finally got it here. it really works.thanks