Saturday, June 08, 2013

How to Remove Blank Space Above Blogger Header?


Blogger Title with No Empty Space


If you're using one of the default templates of blogger then you may need to fix several issues regarding the header of your site. Such as Navigation Bar, unnecessary space above the header, customizing the header style etc. etc. Better you may like to use a third party template. But a third party template is not always 100% compatible with blogger. That's why I personally prefer to use the default one. Today I would like to show you the easiest way to remove the unnecessary space above the header


Look at the above image. This is the header style of Marks PC Solution without Navbar and Unnecessary Space. If you follow this post, you will be able to make your header like this one. 


There are also two bonus topics for you! Though these two were published before I'm gonna link them back here. Read them if you think necessary: 

Before removing the navigation bar, your site's header will be look like the image below:


Navigation Bar before Blog Title


And certainly, this bar damages the professional look of your site. I've already published the post about removing the navbar from blogger.  


However, I'm telling you in short about removing the navigation bar. Because to remove the empty space above the header, first you have to remove the navbar from your site. Follow the steps below: 
  1. Hope you're signed in to your blogger account. Go to the dashboard/ design/ setting or whatever you call it.
  2. Now go to the Layout.
  3. Find the Navbar (Usually at the top)
  4. Click the Edit option > Select Off > Save
To know more - Click here


Assuming that you've already removed the Navigation bar from your blogger site. Now After removing the navbar, your header will be look like the image below: 



White Space before the Blog Title

If you have a close look at the above image, you will see there is an unnecessary empty space instead of navigation bar. And it looks very odd. Let's remove it. But before that, make sure you're signed in to your blogger account and navigation bar is removed from your site. Now start: 
  1. Go to the design or dashboard from your blogger account.
  2. Hit on the Template option from the left pane.
  3. Hit on Edit HTML button. (Backup your template to avoid mishap!)
  4. Here you will get the HTML of your template. You need to add a small code in it.
  5. Click on the HTML Code Box then press Ctrl + F to enable search. 
  6. Type </head> in the search box and press Enter. 
  7. Now copy and paste the below code just before the </head>.
  8. That's it! Hit on the Save Template button, view your blog and see the magic! 
<style type='text/css'>

.content-inner 
margin-top: -40px !important; 
}
</style>

Code should be placed like the image below: 


Code to Remove the White Space above Blogger Header

After successfully placing this code on your site, your site's header will have no unnecessary space on it. We always wish your success as a blogger. Continue with us to get more tips on blogging . . .


Stay with Marks PC Solution to get more interesting IT topics!


29 comments:

  1. Thanks for posting this man, it really helps. By the way, the person posting the comments above is just spamming your website to leave links on it. You may want to consider deleting his/her comments.

    ReplyDelete
    Replies
    1. Thanks for the comment and suggestion.

      Actually I know they come here for spamming. And I warned them too. Sometimes I think they choose my site for spamming. It's a credit too! Because they might choose other sites for spamming.

      But definitely it makes bore the visitors like you who come here to share fair opinion. That's why I will try to remove those comments one by one for your convenience.

      Thanks again for sharing us. Stay close . . .

      Delete
  2. Thank you soooooooooo much!!!
    I have been messing with my header code trying to figure out where all that stupid extra space on top is coming from! I didn't even think about the fact that I'd removed the nav bar.

    ReplyDelete
  3. Thanks so much! I changed the -40 to -20 to get the look I was wanting. Thanks again!

    ReplyDelete
  4. I followed all the necessary steps but still have so much space on top of my page. I don't know what to do.

    ReplyDelete
  5. thanks alot! worked like charm :)

    ReplyDelete
  6. ok, there is a side effect. Now the mobile version cuts most of my blog title off..how do i fix that?

    ReplyDelete
    Replies
    1. If you see the mobile version in desktop, you will see the header has been cut off. But visit your site from a real mobile device. Hopefully you will get the proper view.

      And really sorry for the delay. I want but can't reply timely due to the heavy work load. Sorry . . .

      Delete
  7. Before I only knew about how to reduce the space on the above of the blog title. After, come to visit your blog, so I can use both the one in my box and yours together.

    [ Reduce the space on the above of the blog title]

    .Header h1 {
    margin-bottom:-50px!important;
    }

    [Reduce the space beneath of the blog title]

    .content-inner
    {
    margin-top: -30px !important;
    }

    Thanks so much

    ReplyDelete
    Replies
    1. Added both of these and they work great - thanks! http://aliyahland.com

      Delete
  8. not show my blog header image in mobile site, pls help

    ReplyDelete
    Replies
    1. You've set your mobile site template as custom. Please set default mobile template. This will solve the problem I hope.

      Delete
    2. The problem is: the change is applied and personalized mobile theme where everything was fine. You solve?
      Mobile custom theme show changes made to avoid errors in html loading speed site.
      Thank You!

      Delete
    3. Can't get you. If you please clarify . . .

      Delete
  9. Thank you bro.. This helped me.

    ReplyDelete
  10. Thank you!!! I've been trying to figure this out for MONTHS!

    ReplyDelete
  11. Thanks! I've tried other solutions on other websites and this was the only one that worked!

    ReplyDelete
  12. Thanks, this was exactly what I was looking for.

    ReplyDelete
  13. I cannot believe it took me this long to find your page and be able to use this tiny piece of advice I was looking for all over the Internet!! Thank you! :)

    ReplyDelete
  14. Hope you will get more necessary tips if stay here some time ...

    ReplyDelete
  15. thank you so much that helped me a lot.

    ReplyDelete