Wednesday, November 08, 2006

Disabling the Blogger Navbar

Here's a great tip from reader Matt Mc. Matt commented in response to a post about customizing your Blogger template that he finds Blogger's default navbar annoying. Blogger doesn't let you disable this feature but Matt shared a short snipped of CSS that you can add to your template to suppress it.

I tested it out and it works great, though I have re-enabled it on this blog, as I don't mind the navbar and its search feature could be useful to you. (For readers new to blogging, the navbar is the black horizontal bar at the top of this blog, just above the header graphic. It offers some useful functionality and is intended, in theory at least, to deliver traffic to your blog from other Blogspot blogs.)

Turning Off the Navbar

Here's how to disable the Blogger navbar:
  1. Open your template and locate the style section at the top, just under the <$BlogMetaData$> tag.
  2. Find a space between two other styles, and type the following code:
    #b-navbar {
    height:0px;
    visibility:hidden;
    display:none
    }
  3. Save your changes and view your blog. The navbar should be gone.

Once again, the elegant simplicity of CSS saves the day. Technically, this combination of style declarations doesn't really turn off the navbar; it just hides it from view.

Note: there is some question as to whether disabling the navbar violates Blogger's terms of service, though I could find nothing specific on their site relating to this.

8 comments:

  1. I have seen your blog. It’s quite interesting and informative.

    Have a look on our Services CSS Templates .

    Have a good day.

    ReplyDelete
  2. Hello Pam..
    i have one more thing to add to your post.

    there is another simple method to hide blogger navbar.

    look for the tag <body> in your blog template

    and replace it by
    <noscript>
    <body>
    </noscript>

    and save your template changes..
    now you can see that blogger nav bar is gone..
    i have used the same technique in my blog
    http://technicalbliss.blogspot.com

    have a look.

    ReplyDelete
  3. Thanks Arpit. Always nice to have more than one way to do things, and yours is easier than the method outlined in this post :-)

    ReplyDelete
  4. Hi,

    I found an improved solution that works also in the non-beta Blogger, too!

    It gives you a button to click on to hide/show the nav bar. By default its hidden. To me, at least, this is more functional than entirely hiding it

    ReplyDelete
  5. Thanks anonymous. It's always great to have multiple ways to do things :-)

    ReplyDelete
  6. Hi

    that code no run...
    but this yes:
    #navbar-iframe {
    display: none;
    }


    greetings

    ReplyDelete
  7. Cheap WOW GOld, Please look here
    Buy wow GoLd,
    World of Warcraft WOw golD and woW gOld money,
    wOw Gold.Acquista WOw gold oro,
    wow goldSoldi, WOw GOld to each loyal and
    woW goLD siamo uno dei miglioriWoW gold which is very cheap.WOw gold

    ReplyDelete

Note: Only a member of this blog may post a comment.