Remove Empty Space Above Blogger Header

Remove Empty Space Above Blogger Header

There's a huge empty space left on top of the blog's header after you remove the Blogger Navbar. This space often interferes with the blog's design by pushing down the header. It can be utilized to display - ads, navigation menu, social networking buttons and much more. So why waste it?
blogger logo

Here's how you get rid of the empty space left after removing the navbar:


1. Log in to your blogger account

2. Go to Template -> Click Edit HTML and then Proceed.

3. Using Ctrl+F look for </head> tag:

4. Now add the following code just above the </head> tag:

<style type='text/css'>
margin-top: -40px !important;

5. Preview the template before saving.

You can change the -40px to any desired value. Keep experimenting with this value to adjust the header's position.

Click Save once you are satisfied with the changes.


  1. Fantastic post... I was looking for this. You awesome man... thanks.

  2. Thank you. The empty space above not only looks bad, eating up the precious screen space, it also affects SEO post Penguin. This helped a lot.

  3. superb .... how did i forget about margin-top .. i was trying visibility:none but was not working..

  4. Thanks for this! It helped a lot!

  5. Thanks a lot! Worked for me!

    All the best,

  6. Worked For me Thanks a lot man.

  7. woow it worked. thanks for your post!

  8. THANK YOU!!! i was looking for this everywhere and finally found it here!! THANKS THANKS!!

  9. Thank you! I'm glad it helped you all...

  10. I played with it a bit to see how it would affect my blog, what a great tutorial, thank you! I don't actually have any space between my header and the top because I have an ad there, but I would like to reduce the space between the ad and the header. Any idea how to do that? (If it matters, I am not actually using the blogger header gadget, I have uploaded an image that I applied an image map to.)

    1. Hi Jamie,

      I did not see any ads on your blog near the header. Although, it wasn't clear from your comment as to what adjustments you're seeking, however, if you have few pixels here and there bothering you, I would suggest you change the padding near that region or use the above method. This should be fine.

  11. This comment has been removed by the author.

  12. Hey, great post! I wondered if this was possible for the left and right sidebar margin/paddings? On my blog there is a significant gap between the background and actual text on the main body and I would like them to be practically next to eachother. If this doesn't make sense I will happily show you an example of what I would like. Thanks a lot, really appreciate it!

    1. Hi Lucy,

      You can simply manipulate the width from the template designer itself. I don't think you'll have to add any code.Just go to Template - > Customize -> adjust widths and adjust the slider. That should be enough.

      However, if it doesn't work use this method.
      1. Template - > Edit HTML

      2. Search for ".content-outer"
      and add this line "margin-right: -20px;" Adjust the pixel values as needed.

  13. Worked brilliantly with removing the gap at the bottom. Thanks!

  14. Thank youuuuuuuuuuuuuuuuuuuuu!!!!
    Thank you!

  15. Replies
    1. This is one of the simplest tweaks... Can you post your blog url? I can have a look...

  16. Thanks so much for this, you are a lifesaver! I've been looking for ages ;)

    A few other things, I wanted to also get rid of the space on the left side because I want my header to stretch out the entire length of the page. So what I added was

    margin-left: -81px !important;

    However, as you can see my entire body content also shifted along to the left. Is there anyway to keep the body content centered? I would also like the body content (so the post body and the sidebar on the right) smaller (in width) than the actual header, is there a simple way of doing this?

    Lastly, (I hope these are not too many questions at once!), I would like my header to run the entire width of the page. Is there a way of doing this or would I simply have to adjust the width of my header in my illustrator program?

    Thank you in advance :)

    My blog:

    1. Florentine,

      You got to reduce the size of your header image to get rid of the extra space. And you need to be precise with it. Its the header image that's stretching extra space on the right side.

      To center align your blog just use the template editor and adjust the width.

      If all these doesn't work try adjust the header margin -
      find ".header-outer" and add margin-right:-10px;

      Please let me know if you need more help.

  17. Great post! thanks a lot for sharing this useful post with us.

  18. Thanks so much! Worked with no issues!

  19. You rocksss Man !!! Worked perfect.

  20. Nice post bro! Perfectly work on my blog, I am using blogger simple template for my blog.
    Thanx for Share.

  21. Not working for me..also tried visibility: hidden; , display: none; but nothing works..
    What else should I try?

  22. I realize this is an old post - but thank you so much! For whatever reason, I was unable to change the Header to unlocked, but this at least got it out of the way after I changed the font size. Still have a bit of empty space, but it's much better!

  23. Hi Sagar,

    I have applied code before head (in edit html) at my blog wwwdotm3ndotin. White space at top not removing.

    Please check and suggest.


  24. Thanks for the the code it helped me

  25. Thanks so much! It worked perfectly!

  26. Thank you for this, I've been trying for ages to sort this and your post helped! :D

  27. GOD Bless
    Thanks :)

  28. Hi Excellent, thanks man, NOw i have tried this and reduced left top and right margins.

    margin-top: -40px
    margin-left: -40px;
    margin-right: -40px;

  29. Thank you so much Sagar!!!
    It took me 2 trys... the line is by 1336 guys for whoever cant find it. I have two context for my html for some reason which Is why it didn't work for me the first time

  30. Too Good! This worked very well on my blog


All comments are moderated, so please don't spam. Do not add URL links inside comments, they won't be published.

Recent Posts

About Me

A computer science graduate with over 6 years experience in Web/Game development, A passionate Blogger and Photographer.
Copyright © | Sitemap |. Powered by Blogger.