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 bloggers may already knows 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 arranged this small how-to post.

Blogger is a free platform for all bloggers to host their blog free of cost with 100 percent up time and unlimited bandwidth. Bunch of free templates like Dynamic views, Simple, Picture window, travel, etc. are also included in this awesome package. However, these all are basic templates and need some modifications to give a look them as a professional one. The first and the most prominent thing that affects beauty and professional look is the ugly 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 your blog  if someone click on Next Blog>>. Second its 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 offers, or important blog posts, or subscription link, even can use it for socializing, 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 to dashboard 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.

Hope this tutorial works especially for beginners bloggers. But if you are still facing any problem just tell me in comments section or you can also add me on Google plus and ask your questions personally. Thanks