How to get rid of the Blogger navbar

There's hardly a Blogger user to be found who hasn't been irked by the navbar. True, it’s not entirely useless – it lets you quickly log on to Blogger and provides a quick customization link. But by just being there the navbar brings a generic look to your blog, which is enough to make readers not take it seriously. On top of that, the navbar allows any Blogger user to flag your blog! (Which, assuming you’re one of the good guys, puts you at the mercy of the goodwill of your diverse readership.)

Therefore it’s imperative that you hide your Blogger navbar, or at least know how to. In case you’re wondering, the Blogger Terms of Service doesn’t say anything about the navbar, so you’re good to go.

Hiding the Blogger navbar

1. Sign in to your Blogger account. This will take you to your Dashboard. Click on the Layout link of your blog.

2. Click on the Edit HTML link on the Layout page. Don’t worry, you don’t have to know anything about HTML! I’ll take care of the code.

Scroll down the Edit Template field and paste the following immediately before the Profile section as in the following picture:

#navbar-iframe {display:none; visibility:hidden; height:0px;}

You ought to add a comment (/* for example, this part would be a comment */), just in case you wonder someday why you inserted this particular line of code. Anyway, what this line of code does is hide the navbar – but this will leave some empty space above your header, or as in my case, leave less space and make your template look like it’s been trimmed on the top.

3. If there’s an empty space above your header, scroll up the Edit Template section and paste the following immediately within the curly braces of the body section and as shown in this screenshot:

margin:0;
top: -20px;
position: relative;

Once again, don’t forget to add comments. What we’re doing here is negatively positioning the body of your template to hide the area left vacant by the absence of the navbar. (Some bloggers have proposed solutions using the !important tag, but this might cause problems with screen readers and is therefore not advisable.) Please note that the margin section might already be defined in your template. In that case, just skip pasting the first line. Also, -20px might be too much or too less; tryout a few values to see what works best for you.

4. If your template looks like it needs a tad more space on the top (whether step 3 applies to you or not), just increase the margin a few pixels. For instance the following did the job for me:

margin:2px;

5. Save your changes by clicking on the big orange Save Template button beneath the Edit Template field. Click on View Blog -it should now be navbar-free! If you want to bring back your navbar, simply remove the lines of code you’ve added and save your template.

Happy blogging!