How to Remove Navbar from Blogger

How to hide or remove the Blogger navbar with simple CSS.
If you have a blog on Blogspot or Blogger, by default Blogger automatically inserts a little navigation bar or Blogger Navbar between the top edge of the browser window and your blog content. There are some bloggers who want to customize his blogger page by hiding or removing its blogger navigation bar.

Since it is not mentioned explicitly in the Terms of service for Blogger, it remains doubtful if removing and hacking the Blogger navbar is any violation of the Blogger terms of service. But lets say we are not "removing the navbar" but only "hiding the navbar" to get rid of the blogger nav bar.

Here are steps to hide or disable navbar in blogger:

1. Log into your Blogger account and go to Dashboard > Design > Edit HTML.
   
   
2. Check the Expand Widget Templates check box.
   
3. Copy and paste this CSS code into the CSS section between HEAD tag of your Blogger template.
   CSS code:
   #navbar-iframe {
display: none !important;
}
   
   
   Or, use this code to remove an empty space in your webpages between the top edge of the browser window and your blog content. This CSS code tweak to remove the gap at the top.
   
#navbar-iframe {
height:0px;
visibility:hidden;
display:none!important;
}
   
4. Click Save Template. Click View Blog to preview your blog with no navigation bar on the top of your Blog.