When browsing Blogger powered weblogs hosted on blogspot.com domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.

Turn Off and Disable NavBar in Blog Published by FTP or SFTP

  1. Login to Blogger.
  2. On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Template

  3. The Edit HTML page under Template tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.

    Turn Off and Disable Blogger NavBar

  4. Click on SAVE TEMPLATE CHANGES button when done.

Remove and Hide NavBar in Blogger Widget Template

  1. Sign in to Blogger.
  2. On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Layout

  3. Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

    Edit Blogger HTML

  4. Search for the following line of code:

    ]]>

    Before the line, add in the following line of code:

    #navbar { display: none; }

    or:

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

  5. Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

  1. Login to Blogger.
  2. On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Template

  3. The Edit HTML page under Template tab should be loaded. If not, go to the tab.
  4. Search for the following line of code:

    </style>

    Then, add the following line of code before that line:

    #navbar-iframe { display: none; }

    The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.

  5. After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

    body {

    Add in the following like of code after the body tag:

    position: relative;
    top: -32px;

  6. Click on SAVE TEMPLATE CHANGES button when done.

Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.

Related Posts

  • Angry Image

    Thank you i am very happy, it is working yipeee

  • Muhammad Shoaib

    nice post about remove navbar

  • Asho

    Do google prefer removing blogger navbar?? do my blogger blog will get deleted if i remove navbar??? and also please, removing attribution (footer) is ok??

  • Thank you for the tips πŸ™‚

  • thank you! really have trouble finding the drop box for the first suggestion but other html worked fine. really appreciated this!

  • African Scholarship

    Thanks. Works well but just can’t get the space to disappear despite trying several css codes

  • Frandimore

    That was a great insight. I tried it and it worked. Couldn't close the space but, redesign my template to fill the space with an image that reflects the title of my blog. Keep doing great post. Thanks

  • Richard

    It Works charm for me.. πŸ™‚ some of my bloggers use this but for my main blogger i find navbar very useful especially when making new post, edit the dashboard and search other blogs πŸ™‚

  • amri lawak

    thank you very much for this outstanding tutorial.relly appreciate it πŸ™‚

  • teecup

    Thank you for the quick guide. It really works πŸ™‚

  • Lucia

    Thanks it worked properly here.

  • blcompere

    Thank you very much.

  • Abhinash

    Yes It worked for me.

  • roma rahul gupta

    Nice Info.
    I am going to put code according to this and hide my navigational bar.
    Thanks for posting this.

  • satheeshr

    Sir,

    Truely helpful… works well, hope more…..

  • No Clipping

    Thankyou very much for the easy to follow and simple guide!

  • erli

    thanks dude

  • shadd

    wow, it works! thank's

  • Jatin

    I have tried it !
    The frame is gone but the search box is still there

    Thanx in advance

  • Mandy

    hey,

    Thanks so much. I'm using the new blogger, so I have to change the code at design> edit html

    & it works πŸ˜‰

    You're fantastic!

  • Mahmoud

    Many thanks πŸ™‚

    Works like a charm!

  • James

    Worked…

    Thanks!

    J

  • Stephanie

    So easy to do–I was able to get in and remove the nav bar with no issues in less than a minute! Thanks for posting this.

  • Offr

    Wow! This tip will grow my traffic by 200%, many people really ignore this tip. I thank you so much guy!

  • Faisal

    thank you very much bro πŸ™‚

  • Rupam Guha

    Very useful info…by using this methode I remove the navbar

  • Evilence

    Worked like a charm.

  • Abhishek

    hey thanks for this great trick please tell me how i split my header into 2 coloums.Means i want to add a gadget just beside header in one line in blogger.please tell e this…

  • Jayesh

    Thanks Yaar it's Removed

  • martini

    Worked Well! Thankyouuuu!

  • gandhi

    thank you sir,

  • plaban

    Worked great!! Removed the navbar

  • Steve

    Do you have any idea how to just remove the email address from the navbar. I'd rather random strangers couldn't communicate with me so easily that way

    Cheers

  • @$

    Thanks it works

    great article

  • Nomi Prince

    Man Its really very useful and affective info for removal of Blogger NavBar..!!!

    Great works Man!!!

    Thanks..!!!

  • Chary

    you are great, very helpful information. especially removing gap. thanks a lot.

  • Benjer McVeigh

    Awesome…thanks for the tip!

  • c

    WOW! =D

  • Ehsan
  • Shaon

    Small tricks but really nice. Thank you very much πŸ™‚

  • Yaya

    It worked…. perfectly. Thnx.

  • cr0cus

    tnx guys! after trying others, you were the only one who got it right. tnx agn

  • k.appuhami

    Thank you very much. i could do this.

  • Erika

    Very very very COOL! I have wanted to do this for weeks! I finally had the sense to google how to do it. LOL. THANK YOU SOOOOOOO MUCH. πŸ™‚

  • Kat

    Yay! very few of the diy hacks work-out for me so a BIG THANK YOU! worked on the very first try!
    -Kat

  • Uday

    thank u very much …. its working….

  • Finchev

    ey! it worked! thanks a bunch.

  • Karla

    Works like a charm! thanks!

  • ramon

    wow..thax man ..it works..really appriciate

  • immu

    Thanks I have been able to remove navbar with your help, it works great!!

  • Phil

    Thank you so much. This is a great article on removing the nav bar in blogger.

  • NK

    it worked

  • Gee

    thanks for sharing this. i applied it in my new blogger blog.

  • Blog Elements

    Thank you very much! I managed to remove the navbar from my blog.

  • Lightsabre

    Perfect, thanks!

  • MuscArto

    thanks a lots.
    i could remove the NavBar

    πŸ™‚

  • hpkakoty

    thanks a lots. it worked

  • luckystart79

    thanks very much!

  • Animesh

    Thank u….

  • Animesh

    Thanks…….

  • sami

    Thank you so much! I used the "Remove and Hide NavBar in Blogger Widget Template" way of doing this that you explained and it worked perfectly! It was very easy to do! Thank you for writing up such clear instructions! <3

  • Dew

    Wow, thanks, this is what I've been looking for after setting a custom domain for my blogger. Thanks a lot!

  • mel cole

    thanks a lot for this, it worked well on my new domain πŸ™‚

  • Nathan

    Thank you so much!!! I hate that navbar soooo much and now, its gone! Thanks!!!!!!

  • prashanth kv

    thanks…. its works well

  • Tousif

    thx dude for such a nyc help ..

    thx

  • Crazy And Drunk

    Thanks a lot. That helped!

  • rafa

    I did it, its working fine, thanks man

  • Well Done!

    nice n simple! ur a pro!

  • Sanjay

    This tutorial was really helpful indeed. I implemented it in my blogspot blog and worked well.

  • rrrt

    thank you

  • Anonomous

    Just what I wanted! Thx a lot! πŸ™‚

  • Galit (Slow Lane)

    Doesn't work for me… I second mangonebula, looks like something had changed because it was working for me before in my other blog. I have a new template, based on Blogger classics and this time I keep getting error messages when trying to save the template.
    Any ideas?

  • mangonebula

    has blogger done something new to prevent people from deleting the navbar with a hack? I can't get rid of mine. Can you e-mail me with help?

  • Kat

    Exactly what I wanted. Thanks so much!

  • KOFZ

    great tutorial man help me a lot thnx it work for me

  • TerNovosti

    Thank you for the advice, I have been looking for this after moving a blog to Custom Domains, I think Google should offer this option for Custom Domains from the Dashboard.

  • Trond

    "how to then access my Dashboard?"

    Just goto http://www.blogger.com/home

  • Hak

    Thks,

    I did it.

    But now I want to remove the date i.e."Tuesday, March 9, 2010" at the beginning of the post AND "Posted by XXXXX at 5:17 AM" at the end of the post.

    How do u do that?

    Waiting for your reply

    Thks

  • Di

    Thank you!! Been trying to do that for an hour.

  • bella

    tengs man .it's worked:D

  • It worked!!! I can't believe it…wow! thanks.

    I hated the nav bar on my site……………

  • Well u have to completly remove the code

    #navbar-iframe {

    display: none;

    and that's it, hope it works..

  • litcadence

    The blogger template that I have chosen has turned off my navbar. The html template already says

    #navbar-iframe {

    display:none;

    what do i put in the none part to make it show? what's it supposed to say?

    thanks

  • Fida

    Thanks it works for me

  • Super trick. Thanks.

  • joe

    Nice! very helpful. It work For ME πŸ™‚

    I love you FUll

  • Awesome!!

    It works perfectly…

    thnx for sharing… πŸ™‚

  • Leo

    I registed on blog last month. I could not find any thing related to #navbar in the HTML code.All I saw is

    Is that mean they closed that door for us to do hide the blog link.

    Thanks

  • THANK YOU SO MUCH! IT WORKS GREAT!

  • It works great, but how to then access my Dashboard? I can no longer sign out either….

  • Here's an odd problem. I'm using the widget template. In my browser (FF 3.5, linux) the line of text is fine. But on other machines with other browsers, there seems to be the white line above. I've tried putting in the 32 pixel bump, but that makes the top disappear from when it's in my browser. Any way you can think of to make that line of text browser or system sensitive?

  • I love you. o.O

    I knew the code before, but I had no clue where to put it xD

  • Thanks alot my blog looks much better without the nav bar

  • Kyle

    I am still unable to remove the space with the position: relative;

    top: -32px;

    I am using the classic template what else could be wrong?

    Here is the page http://ericksonkytest.blogspot.com/

  • At last – wow , that took months to get right and now that it works , i am just ecstatic. Thank you so much. The code that did it for me was the insertion of:

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

    just before the ]]>

    i am using one of the templates that come with blogger, but not the classic

  • Fantastic. The directions worked perfectly. Many thanks.

  • TheRickMaster

    thanks a bunch works a treat

  • This is great. Thanks for this post. It helped really well.

  • franz

    thanks for the tip. works like a charm

  • Girl galleries pictu

    Thank you – this helps so much in apperance of my website – that nav bar was so blah on my site.

  • Muchas gracias πŸ™‚

  • sharath

    this is a realy working article

  • Great tip! Thank you so much!

  • Marcia

    THANK YOU SO MUCH!!!! this was so easy and helpful.

  • tallslacker

    thank you for this wonderful tip!!

  • A very cool and easy trick.Thanks for the tip.

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

  • Worked like a charm! Thanks a million!

  • worked like a charm. thanks!

  • Suraj

    Thanks πŸ™‚

  • Awesome! Thank youuuuu!

  • Nd

    A very good trick and thanks

  • Wow, this is amazingly accurate. Thank you so much.

  • Thanks!

  • Thank you!!! : )

  • Thanks! That was so easy…

  • Great job!

  • Marvis

    this is exactly what i was looking for. thank you!

  • YNa

    thanks a lot!

    tips of 'top: -32px;' one is really helpful.

  • Is it possible to leave the bar but JUST remove the "next blog" button? Thanks in advance!!

  • Done, thx for the tip!

  • Thankyou so much, you are a god.

    I have always hated the navbar!

    Thankyou Thankyou

  • Thanks! That bar has always bugged me…

  • Wow, thanks! It is mind-boggling how so many people tell to do things and it never works. This worked instantly. No problems. Thanks again.

  • It really help me a lot, thanks for such a good and informative content. Thanks again….