How to Remove an Extra Top Space in Blogger

Feeling a bit low with an extra space right above the header of your blogger blogpsot? Here comes the solution! Normally when a blogspot user applies a default theme to his/her blog, a navigation bar shows up at the top of page which if removed leaves a blank space. That space becomes quite noticeable in an intrusive way to the visitors. So the bloggers do have a desire to reduce this unoccupied gap between the header top and browser bar. Here in this post we included an easy and step-wise explanation on, how to remove it. Have a look!

Actually this includes two parts; the first part is for the removal of navigation bar and the second one for the reduction of leftover space.  

Part A: Steps to remove the top navigation bar in blogger

1. Head to the LAYOUT section.
2. Click on EDIT button of NAVBAR gadget. (A new window will open that offers you to off this gadget.)
3. Mark the OFF option and save it. 

Part B: Methods to reduce the leftover space.

Method 1

1. Head to your TEMPLATE section.

2. Click on EDIT HTML.

3. Just click on html window and press Ctrl+F. (A bar will show up at the top right corner of the same window.)

4. Search the following piece of code in the bar.

.content-inner

5. The whole code looks like.

.content-inner {

padding:0;

}

6. Now paste the following code right below the above mentioned code.

.content-inner {

Margin-top: -30px !important;

}

7. Adjust spacing according to your taste by changing the figure mentioned in red in the above code.
8. Press the SAVE TEMPLATE button and you are done!

9. If you do not find the code mentioned in step 4 then search for ]]></b:skin>

10. Paste the required code (mentioned in step 6) just above it.

Method 2 (same as Method 1 but with the slight change in code)

1. Search for </head> in the html search bar.
2. Paste the following code right above it. 

<style type='text/css'>

</style>

3.Copy the same piece of code as mentioned in the sixth step of method 1 and paste it in between 'text/css'> and </style> of the above code.

4. You are done!

Comments

So there are two ways to reduce the above space of header. Either way will do the job! Sometimes the code mentioned in method 1 may not work out in custom blogger templates. In that case the opportunity of method 2 could be availed. Enjoy your success, do fill the below comment box with your precious feedback and don't forget to share it with your friends. Stay Connected :)