How to remove or restore Blogger navbar

If you are using Blogger default template, you may notice the dark blue bar on top of your blog, that’s the navigation bar or navbar in short. Actually it’s pretty useful, you can use it to sign in to your blogger account, to create a new post, share and customize your blog. You can also search for blogs, and flag or follow the blog you are viewing.

navbar3

Why do people want to remove or hide it then? Well for one, the bar is not visually appealing, it’s not the prettiest of bars (despite being pretty useful). Secondly, there’s a chance your visitors might leave your blog when they click Search Blog and Next Blog links.

(If you would rather not hide the navbar completely, try Navbar peekaboo)

Okay enough with the customary intro, let’s proceed.

 

Remove navbar

  1. Login to your to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Look for ]]></b:skin> inside the code window. Add the code below right before that line:
    /* Hide Navigation Bar */
    #navbar { height: 0px; visibility: hidden; display: none; }
    /* www.BloggerSentral.com */
    if you are using Blogger classic template, replace #navbar with #navbar-iframe.
  5. Click Preview. If the bar is gone then click Save Template button.
  6. That’s all, done!

For those who sign-in using the navbar, now that it’s gone (hidden actually), you might wonder how do you sign in after this? Answer, just go to Blogger.com, sign-in from there, if you’ve already signed in it will transfer you direct to Dashboard.

 

Restore navbar

If your template doesn’t come with the navbar in the first place, and you want it restored, just search (use Ctrl+F) for #navbar or #navbar-iframe in your template code. You should find similar code with the one in step 4.

To get your navbar back, just delete the code.

Technorati Tags:

59 comments to "How to remove or restore Blogger navbar"

Sensual Photography July 4, 2009 at 12:17 AM    

Is it against the terms of service to remove the Blogger Navbar?

Greenlava July 4, 2009 at 2:01 AM    

It is allowed, but not recommended. Read here:
http://www.google.com/support/forum/p/blogger/thread?tid=76aa8e8f21824b18&hl=en

Thanks

Mark™ August 27, 2009 at 3:21 AM    

Thx Man

Greenlava August 27, 2009 at 12:53 PM    

You're welcome Mark11809

La Danse de Puck September 29, 2009 at 12:43 AM    

I can't do this! I really don't know where CSS starts so that must be the problem... Oh well! I guess my brain has had it for today! AH! and how do you put those tiny orange widgets on bottom left side that float and are for placing a comment and for going to the top? They are cute...

La Danse de Puck September 29, 2009 at 5:53 AM    

Just wanted to let you know that I managed. Million thanks for the help! Best, DanseDePuck

Greenlava September 29, 2009 at 11:16 AM    

La Danse de Puck,
Glad you've got the navbar removed.
As for the floating orange buttons, please read Adding a floating “back to top” button
For the back-to-top button, follow the instruction given in the post.
For the comment button, use href="comment-form". You have to use embedded below post comment for the comment button to work.
Good luck

Program Sukarelawan Teknologi (PROSTEC) October 7, 2009 at 12:02 AM    

thanx, it works!

rexx October 18, 2009 at 12:48 PM    

Hey greenlava..
i'm new blogger here.
how to remove the bar above my blog..
it's not the navbar,but i think comes from the layout that i've used..

Greenlava October 18, 2009 at 10:33 PM    

That's a Pyzam bar. To remove, find this code first:
.bloggerPyBar { background-color:#ff6600;
color:#114477;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
font-weigth:bold;
padding:2px 2px 2px 6px;}

then add in display: none; to it, like this:

.bloggerPyBar { background-color:#ff6600;
color:#114477;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
font-weigth:bold;
padding:2px 2px 2px 6px;
display: none;}

CindyD November 22, 2009 at 3:36 PM    

Again, Can't say it enough!! Thank You!!

Balaji Naidu January 3, 2010 at 3:01 PM    

Thanks proved very much helpful.

www.enterprisingsouls.com January 12, 2010 at 7:14 PM    

I got the code to hide the bar and the code to change the opacity from another site. However in IE the bar does not reappear when you mouse over. Is this just a problem with IE or did I do something wrong? I know the bar is in fact hidden because you can still click on the links in the bar...you just can't see what you are clicking.

JM May 4, 2010 at 3:51 AM    

I don't know why, but, this isn't working for me?

Greenlava May 4, 2010 at 8:42 AM    

@Jonathon Moxon
Are you sure you copied the code correctly (by clicking <> icon)? Anyway this is the code:
#navbar { height: 0px; visibility: hidden; display: none; }

copy and paste it before ]]>< /b:skin>

sohel June 29, 2010 at 1:24 AM    

this site very helpful for us,
many many thanks this site owner ,

Greenlava June 29, 2010 at 10:29 AM    

@sohel
Glad you find this blog useful. Keep coming back, and ask questions should you have them.

Bob July 11, 2010 at 6:29 AM    

Ty man its very helpful just got it working

Greenlava July 11, 2010 at 11:21 AM    

@Bob
My pleasure

Karin July 13, 2010 at 3:12 AM    

The new templates are different, can you help me with the removal of that bar?? i could do it with the old templates, but now... HELP... thanks in advance.
karin

Greenlava July 13, 2010 at 8:09 AM    

@Karin
The code snippet should work on all templates. Make sure you put it at the correct spot.

Vijaykumar Biradar July 24, 2010 at 4:10 AM    

I am not able to remove navbar though I have tried all you said above.

Dharmendra Goyal July 27, 2010 at 5:41 AM    

nice blog

Greenlava July 27, 2010 at 12:00 PM    

@धर्मेन गोयल
Thanks

wibowo July 30, 2010 at 9:31 PM    

thanks for the share has "delete blog". Most blogs so confused. in care but still mending but at many wild ni all aliases NEVER post on hohohohoh
nice post. hi. and happy blogging ...

cindy,  August 1, 2010 at 2:05 PM    

hi. i cant seem to know where to edit this codes to restore my navbar. can u help me with this? thanks.

[style type="text/css"]

body
{font-family: honest johns;
font-size: 14px;
color: #0D0D0D;
cursor:crosshair;
background-color: #F8F8F8;}

A:link
{font-family: tahoma; text-decoration: none; font weight:none; color:#CCB183;}
A:visited
{font-family: tahoma; text-decoration: none; font weight:none; color:#CCB183;}
A:active
{font-family: tahoma; text-decoration: none; font weight:none; color:#CCB183;}

A:hover
{letter-spacing: 0px;
color:#F8F8F8;
font-family: tahoma;
text-decoration: none;
cursor: crosshair;
text-transform:uppercase;
padding: 0px;}


body
{scrollbar-face-color: #B4BEBF;
scrollbar-shadow-color: #B4BEBF;
scrollbar-highlight-color: #B4BEBF;
scrollbar-3dlight-color: #F8F8F8;
scrollbar-darkshadow-color: #F8F8F8;
scrollbar-track-color: #F8F8F8;
scrollbar-arrow-color: #F8F8F8;}

.head1
{font-family:arial;
font-size: 10px;
color:#CCB183;
text-transform: uppercase;
letter-spacing: -0.1em;
font-size: 16px;
text-decoration:none;
text-align:right;}

.head2
{font-family:arial;
font-size: 10px;
color:#CCB183;
text-transform: uppercase;
letter-spacing: -0.1em;
font-size: 16px;
border-bottom:1px solid #A6906A;
text-decoration:none;
text-align:left;}

.head3
{font-family:arial;
font-size: 13px;
color:#A6906A;
text-transform: lowercase;
font-size: 19px;
text-decoration:none;
text-align:right;}

u
{border-bottom: 1px solid #F2D39C;
color: #CCB183;}

blockquote
{text-align: left;
line-height: none;
padding: 2px;
color: #0D0D0D;
border-color: #A6906A;
border-style: dashed;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
background-color: #F8F8F8;

[/style]



[noembed]
[body]
[/noembed]
[img style="position: absolute; top: 0; left: 0; border="0" src="http://i143.photobucket.com/albums/r122/misazgraffito/musiclife.jpg"]

[div style="position: absolute; padding: 2px; width: 405px; height: 100%; background-color: none;
left: 370px; top: 130px;"]

cindy,  August 1, 2010 at 3:17 PM    

hi, i'm cindy who previously posted a comment here about needing help to restore navbar. i've just figure where i did wrong after trials and errors. anyways, thanks.

Telugu news updates_RK August 4, 2010 at 3:25 PM    

Very good, I have successfull with your guide

. August 22, 2010 at 12:39 AM    

I am new to blogger.com and am very much enjoying this tool. Is there a way to specifically remove or hide the "Next Blog>>" feature of the standard navbar options?

Greenlava August 22, 2010 at 1:24 AM    

@Howard Parker
Nope, we can't access the content of a navbar. It's either the whole bar or none of it.

Homo Revertendi August 27, 2010 at 1:36 AM    

Thanks for alle the info here. I was able to remove the bar but now there is a "placeholder" instead, meaning that the nav bar seems to be actually still there but just blank. How can I move the entire site up to the top? Ideas?

Greenlava August 27, 2010 at 8:24 AM    

@Homo Revertendi
It's not a placeholder, it's just designed that way :(.
Anyway, try adding this snippet:
.body-fauxcolumns .cap-top {margin-top: 0;}
.header-inner .Header .titlewrapper {padding-top:0;}

Homo Revertendi August 27, 2010 at 8:07 PM    

@Greenlava
Thank You very much. It works just fine now.
My future readers are grateful too (I am sure).

Learn English September 1, 2010 at 3:00 PM    

Thank you very much i was just wondering after removing my navi bar and now i learnt how to sing in.... thank you once again

Greenlava September 1, 2010 at 8:18 PM    

@Babu Rao
You're welcome. Do come back :)

Leni October 7, 2010 at 12:03 AM    

I've been wanting to restore my navbar after downloading a pretty template. Many thanks for your post, it's been really handy!
Cheers

Greenlava October 7, 2010 at 9:41 AM    

@Leni
Thanks for taking the time to comment.

Unknown November 4, 2010 at 7:16 AM    

THANK YOU THANK YOU THANK YOU..... The code and the snippet worked like a charm :D

Greenlava November 4, 2010 at 3:59 PM    

@Nader al-Maleh
You're welcome :)

Jack Powley November 14, 2010 at 6:33 AM    

Hi, I can't seem to get rid of the bar and have tried following your instructions :(
I can't seem to find the ]]>< /b:skin> within my HTML??
Any help would be much appreciated.

Jack Powley November 14, 2010 at 6:36 AM    

I can't seem to get rid of the bar?? Can you help? I can't find the bit where you said you have to place the html beforehand if you get what I mean?

Greenlava November 14, 2010 at 9:38 AM    

@BloggerSensation
Try this method instead.

Lakshmi Treasures December 6, 2010 at 6:07 PM    

THANK YOU!!! :-D IT WORKED ON MY www.LakshmiTreasures.com

Anonymous,  December 15, 2010 at 1:26 PM    

my trouble is gone.thanks for help..now my blog is acutely look like website..thanks!!

Ishan sankalpa December 18, 2010 at 1:07 PM    

thank you help me for remove my nav bar

Greenlava December 18, 2010 at 8:52 PM    

@Lakshmi Treasures
@Ruman Amant
@Freedom Flash
You're welcome guys...and thanks for commenting.

Anonymous,  December 19, 2010 at 5:22 AM    

My navbar is not hiding....so plz help me out!!
My url is http://amazing-factz.blogspot.com/

Greenlava December 19, 2010 at 11:16 AM    

@Nishant Agarwal
Find this in your template:

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
#lsidebar-wrapper {
width: 215px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

and replace it with this:

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lsidebar-wrapper {
width: 215px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Do you notice the difference?

Offres d'emploi au Cameroun February 21, 2011 at 4:46 PM    

it is just recently that i knew that it’s possible to remove this navbar, my blogs were just bad and so, for long time. In my opinion it’s always a better option to remove the blogger navbar because when it’s not done, the blog just looks like a novice blog. Thanks so much for the trick! Wow! This tip will grow my traffic by 200%, many people really ignore this tip. I thank you so much guy!

joey April 30, 2011 at 4:55 PM    

i know i can do it, because i read it here...thank a lot bro...http:/technewsdepot.blogspot.com

admin August 26, 2011 at 11:29 PM    

Thanks man ..... good work

alan November 2, 2011 at 7:34 PM    

thanx dude
a removed my navbar using your tips
thanx,,
see my site after removal of navbar

Pastaarj February 15, 2012 at 10:44 PM    

Very simple xith the Bolgger-Central Simply Faster Template!

Just had too change
#navbar {display: none; }
with
#navbar {display: true; }

Thank you for all the tutorials!

Blogspot Tips and Tricks April 13, 2012 at 10:19 PM    

Hey Green lava I got another trick to remove nav bar using HTML see this Remove Blogspot Nav Bar

Anonymous,  June 2, 2012 at 11:54 PM    

thank you! I just restored my navbar. you're an angel.

my little cottage July 11, 2012 at 1:53 PM    

THANK YOU FRIEND! I DESACTIVATE THE NAVBAR FOR GOOD AND COULDNT FIND MY SETTINGS...THANK GOD I READ THIS...BLESSINGS...SORAYA

Alex George November 16, 2012 at 9:53 PM    

Now Blogger made it easy. We can disable navbar from the layout itself. To do this follow the steps below.

1. Log in to blogger
2. Click on Layout
3. Click Edit navbar
4. Select disable navbar

Taimoor February 2, 2013 at 4:20 PM    

Thank you so much. You have explained it very well.

Nain March 20, 2013 at 10:50 PM    

very helpful.. thanks

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.