Editing Your Navigation Bar

The navigation bar up at the top of your page is really handy, but sometimes it gets annoying, and it doesn't always match. Even though you can change the color, sometimes it still doesn't look right with the rest of your blog.

This post has two tutorials: how to change the color of your nav bar and how to get rid of it all together.

Changing the color of your Navigation Bar

If you don't mind the navigation bar but it doesn't match your blog (or you just want a different look), here's how to do it.

From your dashboard, select the Design link. At the very top of the Add and Arrange Elements page, you should see a blue bar that says "Navbar". Click on the Edit button. A new window will pop up with all of your color options. Make your selection and then be sure to hit Save. That's it!

Getting Rid of your Navigation Bar

Do you want to get rid of that pesky navbar for good? Here's how.

From your dashboard, click on Design. Click on Edit HTML. You should now see a page that contains the code for your blog template. In the Edit Template box, find this part of the code. It will differ, depending on what theme you have, but nonetheless it should look something like this.

-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Right below that part of the code, add this.

#navbar-iframe {
display: none !important;
}

Just so we're on the right track, here's what the code should look like now.

-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

If your code looks like that, click the Save Template button, right below the box you were just working in. View your blog, and ta-da! The navbar is now gone.

If you ever want to re-add the navbar, it's simple -- just delete the code you added.