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:
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:
- Hope you're signed in to your blogger account. Go to the dashboard/ design/ setting or whatever you call it.
- Now go to the Layout.
- Find the Navbar (Usually at the top)
- 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:
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:
- Go to the design or dashboard from your blogger account.
- Hit on the Template option from the left pane.
- Hit on Edit HTML button. (Backup your template to avoid mishap!)
- Here you will get the HTML of your template. You need to add a small code in it.
- Click on the HTML Code Box then press Ctrl + F to enable search.
- Type </head> in the search box and press Enter.
- Now copy and paste the below code just before the </head>.
- 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:
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 . . .
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.
ReplyDeleteThanks for the comment and suggestion.
DeleteActually 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 . . .
Nice, thank you!
ReplyDeleteThank you soooooooooo much!!!
ReplyDeleteI 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.
Thanks! Worked perfectly.
ReplyDeleteThanks so much! I changed the -40 to -20 to get the look I was wanting. Thanks again!
ReplyDeleteI followed all the necessary steps but still have so much space on top of my page. I don't know what to do.
ReplyDeletethanks alot! worked like charm :)
ReplyDeleteWorked perfectly! Thanks!
ReplyDeleteok, there is a side effect. Now the mobile version cuts most of my blog title off..how do i fix that?
ReplyDeleteIf 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.
DeleteAnd really sorry for the delay. I want but can't reply timely due to the heavy work load. Sorry . . .
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.
ReplyDelete[ 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
Added both of these and they work great - thanks! http://aliyahland.com
DeleteWowwwwwwwwwwww Its great
ReplyDeletethank you it worked :-)
ReplyDeletenot show my blog header image in mobile site, pls help
ReplyDeleteYou've set your mobile site template as custom. Please set default mobile template. This will solve the problem I hope.
DeleteThe problem is: the change is applied and personalized mobile theme where everything was fine. You solve?
DeleteMobile custom theme show changes made to avoid errors in html loading speed site.
Thank You!
Can't get you. If you please clarify . . .
DeleteThank you bro.. This helped me.
ReplyDeleteThanks so much! :)
ReplyDeleteThankyou So Much man !
ReplyDeleteThank you!!! I've been trying to figure this out for MONTHS!
ReplyDeleteThanks
ReplyDeleteThanks! I've tried other solutions on other websites and this was the only one that worked!
ReplyDeleteThanks, this was exactly what I was looking for.
ReplyDeleteI 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! :)
ReplyDeleteHope you will get more necessary tips if stay here some time ...
ReplyDeletethank you so much that helped me a lot.
ReplyDelete