Skip to main content

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'>

margin-top: -40px !important; 

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!


  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.

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

  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.

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

  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.

  5. thanks alot! worked like charm :)

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

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

  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 {

    [Reduce the space beneath of the blog title]

    margin-top: -30px !important;

    Thanks so much

    1. Added both of these and they work great - thanks!

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

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

    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!

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

  9. Thank you bro.. This helped me.

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

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

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

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

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

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


Post a Comment

Popular posts from this blog

GTA San Andreas Cheat Code (PDF)

After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALLCARSGOB

Rules for Bengali Typing in PDF (Bijoy Layout)

Bijoy is the most popular layout for Bangla typing. The layout was developed by Mostafa Jabbar. He is the pioneer of Bangla typing in computer. More than 90% people use his Bijoy layout for Bangla typing. Today, I'm gonna share a PDF file with you that contains the Bijoy Keyboard layout with English fonts! If your keyboard doesn't have bengali fonts then you can print this PDF file to know where the bengali fonts are located in your keyboard. Additionally this file contains all the necessary rules and tips which are essential for Bangla Typing.  Now there are many other software available for Bangla Typing Layout. Such as Avro Easy, Unicode, Unibijoy etc. And there rules are also somewhat different from Bijoy. And some of their layouts follow the same rules like Bijoy. Hopefully this PDF file will support most of the rules when a layout is similar to Bijoy Layout.  Click to enlarge the image Download the PDF file from the button below. Follow

Download Puzzle Flash Game - Save Them

Hey Flash Game Lovers! Today you're getting an amazing puzzle game - Save Them! It's a flash game and the download size is only 382 KB. In this game, you have to move 3 missionaries and 3 cannibals from one side to another through a boat. In any side, if the number of cannibals is more than the number of missionaries, then cannibals will eat the missionaries!  Download Save Them Download the game from the above link. It's a zipped file. Download size is only 382 KB! After downloading the game, you have to unzip it first. Then double click on the SaveThem to start the game.  How to Play? After starting the game, you will get the instruction. You have to make sure that in no side, the number of cannibals is not more than the number of missionaries. This is your only challenge. You have to take them from left side to the right side of the lake through a boat.  Press on a character to jump to the boat. Thus you can take any two of them a