Thursday, December 11, 2008

Removing The Navbar From Your Blog

The Navbar, and the Next Blog link, are great blog accessories, and make your blog part of the Blogosphere. Not all blogs need the navbar though, and not all blog readers appreciate a blog with the navbar on it. Blogger recently admitted that we are permitted to hide it on our blogs, if necessary.


(Update 2009/11/12): With the new "Next Blog" link, and the transparent navbar design, do you really feel obligated to do this?

Note that all that you can do, here, is prevent the navbar from being visible. The code still exists, in the blog template; the navbar simply isn't visible when the blog is displayed.

Fortunately, hiding it isn't difficult. With the new Designer templates, just Edit the Navbar gadget, in the dashboard Layout wizard. You'll have a selection, "Off", at the bottom of the color selections. Save, and you're done.

A useful alternative to hiding the navbar - especially if you find the various links useful - is to make the navbar transparent. The Navbar gadget color palette includes two useful colors - "Transparent Light", and "Transparent Dark". You may find one of those settings more useful than "Off".

You'll have a little work, if your blog does not have the right template. Just add some extra CSS code in the template. I find that adding the required code right at the bottom of the Header section works best. You're welcome to put yours anywhere you wish, and not all bloggers agree where to do so, when they find it necessary to hide the navbar.

Find the 3 lines of code shown below, that are in the template now, and add the first line of code to immediately precede them. This will be at the end of the blog header, just before the blog body. In a normal template, and without "Expand Widget Templates" selected, this will be maybe 4/5 towards the bottom of the template. Backup the template, before, and after, you make this modification!
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
]]></b:skin> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.

Some templates may work better using

#navbar {height:0px;visibility:hidden;display:none} <== Add this line,
]]></b:skin> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.

With a Designer template, this is simple enough. From the Template Designer wizard, the Advanced - "Add CSS" option lets you add code.
#navbar-iframe {height:0px;visibility:hidden;display:none}
or
#navbar {height:0px;visibility:hidden;display:none}
That's all that you need. See my Musings blog, as a demonstration.

With a Classic template, the code may be different.
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.


Some classic templates (possibly some Layouts templates, too) may look better with one additional tweak. The Blogger supplied CSS library may include code that gives the Header container a top margin of 50px, to allow room for the navbar. If your blog uses a patterned or coloured background in the body, you'll have a noticeable blank area at the top. If this is a problem for you, add one additional CSS rule.
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
body #header {margin-top:0px !important;} <== and this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.

If the top container in your blog template isn't "header", you'll have to do some checking. Some templates have an additional container "header-wrapper" for instance. And not all templates reserve vertical space for the navbar. But for those that do, you now know where to start looking. Firefox with Firebug is a great tool, in this case.

And here's a neat variation on the above. If your objection to the navbar is its looks, how about a navbar that's only visible when the mouse is moved over top of it?
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0);} <== Add this line,
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100);} <== and this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.


This does not work in all browsers, but Firefox has no problem with it. You can see this in action in my Miscellaneous Musings blog, and in my home blog Nitecruzr Dot Net.


Note, please, that if you copy the above lines of code and paste them into your template, the comments above, such as "<== Add this line," and "<== and this line,", must be removed. Do not copy the comments.

And note, above, my anal insistence that you install the customising code immediately preceding the existing </style> tag. This is so it's easy to locate the added code. If you decide, one day, that you need the navbar back, it is then easy to find the code that you need to remove.

>> Top

22 comments:

Jon Karna said...

I was wondering if anyone has ever done something more creative with it than remove it. I can imagine a mouse over effect that would pop it out or something of that nature.

Chuck said...

Jon,

Actually, I was playing with the "now you see it, now you don't" effect a few days ago. It doesn't work with IE, but it's right sharp in FF.

Lex said...

Does removing the navbar from your blog stop people from finding your blog in the next blog link?

Chuck said...

Lex,

As far as I know, you'll still get "Next Blog" inlinks. I'm not aware that Blogger has blocked "Next Blog" based on navbar being blocked. I suspect that it would not be a trivial script to scan blogs for that, and right now, it wouldn't significantly detect splogs, as a standalone criteria.

Administrator said...

Removing the navbar takes away the 'Sign In' Option. How to log in now?

Chuck said...

You log in and log out, without a navbar, using bookmarks in your browser.

Margaret Thomas said...

thank you....

Mel's Box of Chocolates said...

Worked like a charm! Thank you!

Karen said...

Thank you, thank you! :)

Alyssa said...

I have a blog which currently spans 3 sites thanks to the restrictive nature of Blogspot. I followed your instructions and was able to hide the navbar on 2 sites, but can't get it removed from the third (http://nowforeverandalways.blogspot.com/). I know you're very busy, but if you wouldn't mind taking a look and helping me figure out why your instructions don't work here, I would really appreciate it. Thanks!

Alanna Kellogg said...

Hi Chuck, Thanks for this. I'd removed the NavBar from A Veggie Venture a long while ago, but had never been able to figure out how to remove the space remaining. Today, zap, gone.

Alanna

Mrs. Bailey said...

I removed the navbar following your directions. Thank you. How do I find my dashboard now?!

Chuck said...

I removed the navbar following your directions. Thank you. How do I find my dashboard now?!

This is why removing the navbar, though permitted, is not recommended.

Now, you will need a bookmark pointing to www.blogger.com.

Everflowinglife said...

Thanks, I was able to remove the navbar with your instructions.

Chef said...

How can I hide the "Powered by Blogger". and "Subscribe to": Posts (Atom) from the bottom of the blog?
Thanks

SereneBabe said...

Brilliant. Thank you! Great, great helpful site.

Jacqueline said...

Thank you so much for this tutorial, Chuck! It worked perfectly at my blogs. God bless you for your generous sharing!

cnwtx said...

Is it possible to let it scroll on and off the page, not just bang i'm here? this is when I am using the "appear on mouseover" code.

openid said...

I thought about how to log in too, but it's easy to get to the dashboard by going to blogger.com.

PCC said...

Kick ass! Thanks. That navbar has been giving me a headache for years. You've made the world a better place.

Jo said...

Yaaaa... It worked!!!!
Thank you so much.
xxxxxxx

Yurune said...

It totally worked, thanks! :D