Skip to main content

How to Remove or Hide Navigation Bar in blogger

What is NavBar
Please see the picture above. That’s the Navigation Bar which blogger automatically inserts into all pages of your blogspot blogs. This is also called Blogger NavBar.

Why do you want to remove it

>> Most of the time, the NavBar doesn’t match with the template used. Thus it affects the look of your web page.

>> The NavBar has following buttons like Blogger, Search Blog and Next Blog etc. Most of these buttons drives your site visitors away from your page. This is something you wont’ like.

What do you need to know to do this
In my point of view, the job will be easier if you know little bit about HTML and CSS. But don’t worry, still you can do it. Juts follow the instructions below. You can learn more about HTML and CSS at w3schools.

How can I remove it (NavBar)
It is very simple. You don’t have to be web savvy to do it. Just copy and paste the CSS Code shown below in your blogger template and you are done.

1. Code for New Blogger: <style type="text/css"> #navbar-iframe { height:0px; visibility:hidden; display:none; } </style>

2. Code for Old Blogger: <style type="text/css"> #b-navbar { height:0px; visibility:hidden; display:none; } </style>

How to Implement it in your template

For the Simplicity, I am taking an example of new blogger template which I am using right now. But mine is customized. See the picture below how I have inserted this bit of code into my new blogger template. Login to your blogger account and then go to Template – Edit HTML as you can see in the picture. At this point, I suggest you to download the Full Template as you can always use it to restore your template incase you make some mistake. It will appear under Backup/Restore Template. Just click on that and save it on the Desktop. Then copy the highlighted code leaving <style type="text/css"> and </style> and paste them somewhere inside the body tag as shown in the picture below.