Skip to main content

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!

Comments

  1. THANKS!!!! VERY HELPFUL!

    ReplyDelete
  2. please please help me this doesnt work blogger changed everything there is no layout link on dashboard and edit html is in design and there is no profile in html PLEAE help me by updating your post!! please please please i want to get rid of the stupid navbar

    ReplyDelete
    Replies
    1. http://blogger-templates.blogspot.com/2005/01/remove-navbar.html

      Delete
  3. @doggym hi, sorry can't help.. I haven't had any interaction with anything Blogger in quite some time now, and I'm absolutely out of my game here.

    Advice: If you want to blog and be at least remotely serious about it, I suggest you get a WordPress blog (NOT a WordPress.com account). Blogger simply doesn't have the chops for being a serious blogging platform. Trust me on this! And the earlier you make the change from Blogger to WordPress the better. Good luck, and sorry again for not being any help.

    ReplyDelete

Post a Comment

Popular posts from this blog

Miscellaneous security software (part 1)

This is part 9 in my Optimizing Broadband|Windows|Firefox series and part 1 of my reviews of miscellaneous security software. Covers anti-spyware, anti-adware, registry cleaners, junk file cleaners, and install monitors.The following aren't really reviews, but should provide you with everything you need to know.

Anti-spyware and anti-adware reviews
Most antivirus applications today come with built-in anti-spywares, so unless you're suspicious something is wrong with your PC you don't need to worry. However, it would be a good idea to install a third-party anti-spyware and anti-adware once in a while to make sure everything's under control. The chief anti-spyware and anti-adware brands are Windows Defender (from Microsoft), Ad-Aware 2007 Free (Lavasoft), AVG Anti-Spyware Free Edition (Grisoft) and Spybot S&D (Safer Networking). Note that I haven't mentioned any paid software, such as the popular Spy Sweeper (Webroot Software). It hardly makes any sense to spend m…

Adding a line break in Excel

I keep forgetting this! To add a line break/create a new line in an Excel cell, press Alt+Enter. Problem solved!