Thursday, January 8, 2009

Howto Remove Blogger Header

Howto Remove Blogger Header. Maybe you already removed the navbar and maybe customizing the header by removing the border wasn't enough, and you just want to remove it completely.

Go to 'dashboard' and select 'layout' and then 'edit html'.

Scroll down until you get to the "#header-wrapper" section.

    #header-wrapper {
    margin:0 auto 0px;
    border:0px solid $bordercolor;
    #header-wrapper {
    margin:0 auto 0px;
    border:0px solid $bordercolor;
    display:none; /
and save.

Update: if you're using the new templates, do this instead.


Anonymous said...


Also Visit

Mohammed Zatari said...

any idea in how to change it,
like to more left and to the bottom a little bit??

QuiteTall said...

hmmmm no, but not sure why you want the header to appear in the middle of the page?

Mohammed Zatari said...

i dont want it to be in the middle!

i just want it to be a little down and a little to the left,

i end up with removing it, because when i put it, the design looks not cool at all,

check my blog and look at the design!!
u can see what im talking about!

now i dont have a title and i dont have a HOME link button! :(

but really thanks for this tutorial!

Pedram said...

now this was really useful, thanks a lot!

-akth- said...


Ryan Alexander said...


ctrl + f with 'wrapper,' then add the "display: none;"

This is a year old but it works loads better than newer ways to remove the header. Thanks, guy.

yeasin0009 said...

no more valid.

Rob said...

Look for this code now:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;

then add:

display:none; /

End code should look like this:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
display:none; /

Zohaib Nasar said...

hmmmmmm it worked, thanx

Atishay jain said...

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

Abdul wahab said...


Sharon Trumps said...

Oh my, thank you so much. I have tried everything and nothing worked but this.

dwayne said...

thanks so much - this worked great!

Geetha P said...

thank you very much admin, i am searching for this..

admin said...

well, this is what im looking for so's really works and my blog look excellent. tq admin

tj said...

...Yay - it worked!

...Thank you!

...Blessings... :o)

It's Like Boo! said...

Thank you! :D

Tara said...

worked perfect THANK YOU!

Ashlyn Nicole said...

very helpful, i am using the simple template. thanks!

Juliette said...

Hi! I made an imagemap header to replace the regular header but when I follow your directions it makes both headers and the gadgets (menu navbars) up there also completely disappear. Can you help?? Thank you! I tried this on another blog as a test and it worked like a charm. Any reason it's not working on my blog? Thank you for your help!!

Steve Mansfield said...

@juliette - what do you mean by an image map?

Juliette said...

Hi Steve :) It's just an image that links to more than one place. For eg, in my case, if you click on the bird you'll go to my twitter. If you click on the fb icon you'll go to my fb. If you click on the main part of the header you'll go home. I made it on this site: although I've heard it's easily done in photoshop as well. Make sense? I uploaded it to my test blog and then used the instructions here to hide the original header and it worked perfectly. No idea why it's taking down the whole upper section including all the gadgets on my blog. Weird. Thanks for any ideas you may have to help!