Friday, March 23, 2012

Removing the navBar from your blog

This article explains what Blogger's navBar is, what features it offers, and how to turn it off if your blog-site doesn't benefit from these features

What is the navBar in a Blogger blog?

At the top of most blogger blogs, there is a strip with some handy functions on it.

This stripe is called the navBar (short for navigation bar), and it can be incredibly handy for your readers - if those readers are Blogger users, or at least Google users, and so appreciate it.   For others, however, it's just clutter, and a waste of perhaps 15px of above-the-fold space.

On the left hand side, the navigation bar (aka the blogger bar) has tools for visitors to your blog:
  • A quick link to the Blogger software, ie  (the capital B icon on the left)
  • Search - access to a very cut down search function
  • Follow - a quick way to follow your blog
  • Share - a very simple set of social-networking share buttons
  • Report Abuse - linking to Google reporting centre
  • Next Blog - a link that takes the reader to a semi-randomly chosen blog made with Blogger (semi-random because it's matched on topic, to some extent)

On the right hand side, if you are logged in and looking at a blog which you have administrative rights to you can see:
  • Your Google account name
  • A new post link 
  • A link to the Blogger Design tab for the blog you are currently viewing
  • A sign out link, to let you log off your Google account. 

Or if a visitor is logged in, but doesn't have administrative rights for the blog they are looking at (ie if they are a visitor looking at your blog), they can see
  • Their own Google account name
  • A link to their own Blogger dashboard 
  • A sign out link, to let them log out of their Google account. 

These functions have their uses, although I wouldn't rely on people to see them:  if you want your blog to be popular, you'd be far better off adding your own custom search engine and social networking icons).

But if you want your blog to look like a website, the navBar should be on your hit-list of things to be removed.

(And if you're wondering why your blog doesn't have these handy functions at the top, it's either because your templates already has them removed, or because you are using a blog with a dynamic template:  these don't have a nav bar at all.)

How to take the navBar off your site


The following is now redundant, because Blogger have added an Off option to the navBar options - all you have to do is go into Layout > Navbar (edit) and choose Off.

If the Off option leaves an empty space at the top of the blog - you can remove it using this simple tip.

The information below is kept here for reference only (in case the Off option does not work at some point in the future).

To get rid of the navBar, just follow the usual way of adding a CSS rule to your template, and add this rule:
#navbar-iframe { height: 0px; visibility: hidden; display: none;} 

And if you want to close up the space at the top where the nav-bar used to be, add this CSS rule too:
#navbar { height: 0px; visibility: hidden; display: none;}

How to report abuse on a blog that has the navBar removed

Some people may remove the navBar because they want to use Blogger for purposes that are against the terms and conditions, and don't want to be reported.

Sadly for them, the lack of a "Report Abuse" link doesn't help very much: if you see a blog that you want to report, you can simply used Blogger's terms of service complaint submission system, and type in the link to the blog or blog-post yourself.

Do make sure that you review the list of things that Blogger will accept complaints about:  it's not a good idea to get a reputation as someone who cries wolf, just in case you need to report something genuine later.

Related Articles

Adding a CSS rule to your blog

Linking your blog and the social-networks

Understanding Google vs Blogger accounts

Adding a custom-search-engine to your blog

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. Why have'nt you removed the navbar from yourown blog then?

    1. I haven't removed it from this blog because it makes sense to have it here: most visitors are blogger users, so understand it.

      But I have removed it from some other sites that I've made with Blogger, eg

  2. great post with brief info which helped me alot in getting done...

  3. Fantastic and really helpful, you've helped start to look like a proper website! Thanks x

  4. Thanks for the simple tutorial. Do we face any problems if we remove it?

  5. Weird, the line of code that close up the space at the top where the navBar was supposed to be doesn't work anymore.

    Or at least in classic template.

  6. Thanks! Helped me so much. But the code to close up the space doesn't work :(
    I use the new blogger.

  7. Thanks! it worked for me. Thanks again.

  8. Thank you so much!!! I think a tip for the closing up the space is to hit enter after pasting the CSS code! Without hitting enter, Blogger will not recognize you've added a code. :3

    Thanks much!