Monday, July 30, 2012

Hiding the space where the navBar used to be

This article shows how to remove the space that is left when Blogger's top-of-screen navigation bar display is turned off.

Famous London underground "mind the gap" phrase applied to the underground logo, and printed on a teeshirt
Removing the navBar is one of the long-standing tweaks that blogger users have been making ever since layout templates were introduced.

It caused a bit of heartache in the early days, because there were suggestions that perhaps doing so violated Blogger's Terms-and-conditions.

And the navBar is still the home of some tools that people do think are useful, including the report abuse link.

But it looks like Blogger themselves have finally settled the arguments.  They've adding an option to off turn the nav-bar to the from the Layout > Navbar - edit tab.

  1. Choose the Off option
  2. Click Save.
  3. Click Save arrangement (top right)

(Granted they did hid the option at the very bottom of the list, and as far as I know they didn't mention it on any of the new features announcements.   But it is there, so it must be ok to use.)

Note: If you have already applied the original remove-the-navBar tweak, then your option button will be whatever it was before, even though your navBar isn't showing.

What your readers will see

If the navBar is turned off, then your blog will be drawn on the screen in the usual way, except that the space where the navBar was will be filled with a solid line in your background colour.

At least some of your readers (eg ones who use a netbook or other smaller screen quite often) will regard this as a waste of valuable screen space.

How to remove the gap where the navbar used to be

You can move the header up to cover over the area where the nav-bar was by adding a CSS rule to your template in the normal way.

The rule to add is:
#navbar { height: 0px; visibility: hidden; display: none;}

Apply that, and the space that the nav-bar was in will simply close up, so the rest of the content is a little closer to the top of the screen.

Is it a good idea to get rid of the navBar?

"Just because you can, doesn't mean you should"
I explained what features the navBar offers in my initial article about how to remove it.  I still think that there's no hard-and-fast rule about whether to keep it. It seems to me that the navBar is:
  • Particularly useful to readers who use blogger themselves
  • Handy for those readers who have Google accounts themselves, and understand the benefits of being logged in while browsing
  • Confusing and annoying for the rest of your readers
  • A Very Bad Thing(tm!) if you're trying to hide the fact that your website is built using Blogger.

What do you think?

Will removing the navbar make your blog better?

Are there any blogging friends who you should share this tip with now, because it will definitely make their blog look better?

Related Articles

How to add a CSS-rule to your template

The original hack for removing the navBar from your blog

Custom, layout, designer and dynamic templates - understanding which is which.

Understanding Google accounts.

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. It does work if people follow instructions properly :) Thanks for the tip, was very helpful.

  2. Thanks a lot, it worked perfectly.

  3. Worked great for me and the space was filled with my background, not just the color, the design.

  4. Thanks for the tip! this worked perfectly :)

  5. Hi!
    I have removed my header, and (as of now) kept the original navbar (at least I think it's the original - it looks like it).
    What CSS can I add to remove any space (I believe a 6.750 margin) left between navbar and top of page?

  6. Why blogger doesnt STIll giving the chance to design responsive templates?
    Why blogger doesnt have STILL responsive template/designer?

    The tip is good by the way ,)