How to remove Navbar and Space Above Header in Blogger/Blogspot

Today’s post is very simple, and also has two basic tricks which many of you bloggers already knows in 2012  about that how to remove navbar in blogger blogspot and the space above header which appears when navbar eliminated from a template.  So on demand of some of our fans who start their blogging journey recently we arrange this post.

Blogger is providing a free platform to each blogger to host their blog free of cost, and also providing you some free of cost cool templates like Dynamic views, Simple, Picture window, travel, etc. These all are basic templates and need some modifications to give a look them as a professional one. The first thing which creates their blog image ugly is the NAVBAR which appears on the top of each blog. There are so many benefits of removing it, first you get rid of unpleasant type of thing which have no use in your blog instead it will cause to redirect traffic from if someone click Next Blog>>. Second it absence also give your free site a look as a custom one. And the third one is you can use navbar place for more purposeful work by creating your own custom bar in which you can share some hot topic or series link or subscription link, offers, etc. But there are also some risks, because in Blogger.com terms and conditions they didn't allows anybody to disable navigation bar from their default templates.

Steps to Remove Navbar in Blogger:

• To remove this navigation bar first you need to login in your Blogger account, then move todashboard and then to Site board.
• In second step go to Template and then to CUSTOMISE.
• In third step hit Advanced option and then to Add CSS.
• Now, copy this code 

#navbar-iframe {

Display: none !important;

}

and paste it in Add CSS box.

That’s it and your menu bar is removed, hit Apply to Blog.

Steps for removing space above Blog Header:

After removing navigation bar an empty space left, this is useless and gives ugly look and creates big difference between browser bar and Blog title. So move up your blog title you must need to delete this space and for this purpose you need also need to some CSS code.

So, again follow the above steps which you used in process of removing Navbar and paste below code in Add CSS.

#header {

margin-top: 10px;

}

To increase or decrease gap change 0px numerical value, for example for pulling up title you need to decrease the value and can use -20px, etc.

Thanks

Posted in: Blog, tricks