Divi Page Builder

The Ultimate Web Design Toolkit!

Claim the discount before it disappears!

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

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

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

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!

Divi Visual Page Builder

The Ultimate WordPress Toolkit. Complete Access!

For a short time only, we are offering you 10% off your membership.
Claim the discount before it disappears!

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^^

Comments are closed.

Scroll to Top
Copy link