How To Remove Blogger Navigation Bar (NavBar / Banner)

I was a little annoyed by the navigation bar (NavBar) on my blog. The page element layout setting doesn't let me remove it. After some research, I found an easy way to remove the navigation bar. Follow the steps below.

1) Login to your blogger account (Of course)
2) Click on the 'Layout' link on the blog that you want to edit.
3) Select the 'Edit HTML' link on the top.
4) Now here is the trick, inside the html code, find the part of your template code with 'blogger template style' OR 'Variable definition' (if you are not using the regular template), and paste the CSS definition (highlighted with light green color).

<b:skin><![CDATA[/*
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">

5) Remember to save template.

6) Now refresh your blog again and you will see the navigation bar disappear. Hooray!!