Our Biggest Cyber Monday Sale Ever!

Grab Agency Bundle at the Lowest Price Ever!
Grab up to 40% OFF! Limited Time Offer.

ADVERTISEMENT

How to remove or hide Navigation Bar (navbar) in Blogger

blogger nav bar remove

blogger nav bar remove

The navbar (navigation bar) is the horizontal bar located at the top of your page. If you think it doesn’t match your blog’s design, or if you need that extra space for your banner — you can remove it to suit your needs.

Here’s how:

1. Go to your Dashboard > Layout

2. under Template tab, click Edit HTML to edit template

3. Just add the piece of code below somewhere between the <head> and </head> tags of your blog’s template…

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

…like this:

  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
/*-----------------------------------------------
Blogger Template Style
Name:     Minima Black
Designer: Douglas Bowman
URL:      www.stopdesign.com
Updated by: Blogger Team
----------------------------------------------- */

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

4. Click SAVE TEMPLATE.

Not sure about the <head> </head> tags?…

Here’s another way. Just look for the piece of code that looks something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

…and place the code just above it like this:

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

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Click SAVE TEMPLATE. And that’s it!

Happy blogging!

The Most Popular Theme of All Time

Built for speed and fully optimized for performance!

22 thoughts on “How to remove or hide Navigation Bar (navbar) in Blogger”

  1. I don’t think I read here if it’s possible to change the color — apparently blogger only has 4 to choose from. Regardless, I’m getting a new look and mine will match the new colors anyway. I’m just say’n. New name and avatar too, just so you know and don’t run away when you come back. And, I did correct your URL on my blogroll ;) Happy night 2u and gr8 post.

  2. 1. As before, Go to Layout > Edit HTML.
    2. Find the word, in the template source code.
    3. Now insert the following code just before ,

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

    Click on the preview button to make sure that the navbar is hidden, then save the template.

    That’s it. You’ve removed the blogger navbar for ever.

  3. nice share!!!

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

    as the script for the bar is that the way to hide and show the bar is to change the “none” to “block”
    none=hide… block=show

  4. 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!

  5. Thanks for tip! But is it possible for me to hide the nav bar only and when people point over to the nav bar then it will appear again? Your help is much appreciated. TQ^^

  6. Thanks for tip! But is it possible for me to hide the nav bar only and when people point over to the nav bar then it will appear again? If it is possible, how should I do it? Your help is much appreciated. TQ^^

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top