How to disable or remove blogger navigation bar

Before discussing about disable or removing tips let's have some idea about blogger navigation bar. Whenever you open any blog of blogspot by default you will see on the top of the post there is one bar by which you can search other blog, follow blog, share blog post, report abuse about objectionable content to the blogger, navigate to random next blog as well as from the right side of the bar you have sign in feature, create blog feature. If you login as blogger then on the right side of the bar you will see your email address, New Post, Customize, Dashboard, Sign Out menu there.

From following image it will be cleared what we meant by blogger navigation bar or navbar.

Many ones want to remove that bar. There are many reasons behind it. May be they want to get rid of Report abuse / Flag blog feature. Whatever the reasons there is, in this post step by step I will show how we can remove or disable the navigation bar from your blog.

Step 01: Login to your blogger account from blogger.com and then click Layout on the blog that you want to disable the navigation bar.
If you already login to that blog you can simply click customize from the navigation bar.

Step 02: Under Layout menu there is Edit HTML. Click on it. You will get Edit Template box. It will look like,

Step 03: Add navbar css ID and make its height 0, visibility hidden, display none. That is adding following css codes inside your Edit HTML.

#navbar {
      height: 0px;
      visibility: hidden;
      display: none;
}

After adding it will look like following,

body {
  margin:0px;
  padding:0px;
  background:$bgcolor;
  color:$textcolor;
  font-size: small;
}

#navbar {
      height: 0px;
      visibility: hidden;
      display: none;
}

#outer-wrapper {
  font:$bodyfont;
}

Alternatively you can add simply following code.

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

which will look like,

body {
  margin:0px;
  padding:0px;
  background:$bgcolor;
  color:$textcolor;
  font-size: small;
}

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

#outer-wrapper {
  font:$bodyfont;
}

Either of the above code will work.

Step 04: Save the template and view the blog.
You are done.

Tips: Now from the blog you no longer will be able to see navigation bar and thus you will not find New post, Customize, Sign Out link. In order to see those you have to login to blogger.com and you need to maintain from there.

Related Documents
http://arjudba.blogspot.com/2009/08/how-to-increase-your-technorati.html

http://arjudba.blogspot.com/2009/07/how-to-setup-google-webmaster-tool-for.html

http://arjudba.blogspot.com/2009/06/how-to-get-targeted-backlinks-to-your.html

http://arjudba.blogspot.com/2009/07/draw-google-adsense-money-using-western.html

http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html

http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html

http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html

http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html

http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html