Simple Blogger Tutorials

How to Hide or Remove Blogger Navbar

Let’s remove the Navbar to give your blog a more professional look. At the top of Blogger blogs, you'll see a bar in blue or transparent colors which enables you to sign in, search, go to next blog, customize, etc. It is known as Navbar.

This can also be found under the Layout tab (on top-right corner) under Blogger’s Dashboard. I have removed it due to some reasons. Neither did I find it to be much useful nor it was not going with my template design. If you think that these reasons are enough for you too to remove Blogger Navbar then follow anyone of the tutorials as told below.

Blogger Navbar

First, go to Template > Edit HTML. Find ]]></b:skin> and above this add:

#navbar-iframe,
#navbar {
 height: 0;
 visibility: hidden;
 display: none;
}

Preview your template, you will find out that it is not visible (hidden). Now save your template, that's it. Here I have used the method to hide the Navbar completely.

Other options

There are other things too that can be done, let us see that. Remember, these are all optional and use any one of the methods below whichever suits you.

Auto Hide

Just add the below codes before ]]></b:skin>.

#navbar-iframe,
#navbar {
 opacity: 0;
 filter: alpha(Opacity=0);
}
#navbar-iframe:hover,
#navbar:hover {
 opacity: 1;
 filter: alpha(Opacity=100);
}

This option will hide the Navbar temporarily. Whenever you move the pointer to the top of your browser screen, it will be visible again.

Remove Blogger Navbar Completely

Just before the </head> in your template, add the following code:

<!-- <body>
<div></div> -->

This will not only completely remove the Blogger Navbar but you may also find that the quick edit pencil and wrench icons are also removed. This can be a big help for people who are trying to validate Blogger templates.

P.S. This post has been updated on April, 2012.

8 comments :

  1. it is just recently that i knew that it’s possible to remove this navbar, my blogs were just bad and so, for long time. In my opinion it’s always a better option to remove the blogger navbar because when it’s not done, the blog just looks like a novice blog. Thanks so much for the trick! Wow! This tip will grow my traffic by 200%, many people really ignore this tip. I thank you so much guy!

    ReplyDelete
  2. Thanks a lot! this really helped!

    ReplyDelete
  3. That was super helpful, thanks so much!

    ReplyDelete
  4. I just did mine, great help. Now my blog looks great without a Navbar.

    Thank you Raju. Hope you will reply on my other question on my floating sidebar.

    ReplyDelete
  5. i cant find ]]> in my blog. i am using blogger provided templates...

    ReplyDelete
  6. You mean ]]></b:skin> , right?

    Try searching once again with the above code (marked in bold) by hitting Ctrl+F keys together to open a search bar on your browser, it will be easier and it's always there...

    ReplyDelete
  7. well done.. i did it. thanks Bro :)

    ReplyDelete
  8. Thank you sooo much! This is EXACTLY what I was looking for. And your tutorial on adding the floating Pinterest/Facebook/Twitter/Google+ buttons on the side was a godsend as well. I just had to tweak the dimensions and background color, no biggie.

    ReplyDelete

Don't SPAM! Read comment policy.

Like