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'>
.content-inner
{
margin-top: -40px !important;
}
</style>

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.

35 comments:

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

    ReplyDelete
  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.

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

    ReplyDelete
  4. Thanks for this! It helped a lot!

    ReplyDelete
  5. Thanks a lot! Worked for me!

    All the best,
    Tine

    ReplyDelete
  6. Worked For me Thanks a lot man.

    ReplyDelete
  7. woow it worked. thanks for your post!

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

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

    ReplyDelete
  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.)
    ~Jamie

    ReplyDelete
    Replies
    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.

      Delete
  11. This comment has been removed by the author.

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

    ReplyDelete
    Replies
    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.

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

    ReplyDelete
  14. Thank youuuuuuuuuuuuuuuuuuuuu!!!!
    Thank you!

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

      Delete
  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 :)

    Florentine
    My blog: http://readiculously-peachy.blogspot.com

    ReplyDelete
    Replies
    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.

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

    ReplyDelete
  18. Thanks so much! Worked with no issues!

    ReplyDelete
  19. You rocksss Man !!! Worked perfect.

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

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

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

    ReplyDelete
  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.

    Sriram-D

    ReplyDelete
  24. Thanks for the the code it helped me

    ReplyDelete
  25. Thanks so much! It worked perfectly!

    ReplyDelete

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

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