styling the blogger navbar

You are probably all familiar with the navbar that floats at the top of most Blogger blogs. You know how to pick between four navbar colors in the Page Layout tab, and you might have noticed that some bloggers don't even have a navbar. Well, today I'm going to teach you to get rid of the navbar, change the width and position, customize the color, and more. It's pretty easy!

The HTML tag that we use to represent the navbar (the same way that sidebar-wrapper stands for your sidebar, and main-wrapper stands for your posting area) is #navbar-iframe . Most people don't know how to customize the navbar because this code cannot be found in your blog's HTML code. No worries, though, it's really easy to add in. Open up your blog template and search (CTRL+F) for the code

]]></b:skin>

 Just above that, copy and paste in this code:

#navbar-iframe{
}

Any code we add to customize it is going to go in between those two lines.

change the color:

#navbar-iframe{
background: #ffff00;
}

Just add in this one line and replace the code in red with any color code you want (try the second color picker here, and copy and paste the six-digit number, also known as a hex code). This particular example will turn your navbar background a bright yellow. Here's a blog design secret: you can also simply type in the name of several common colors, plus a few obscure ones. Try this:

#navbar-iframe{
background: aquamarine;
}

Pretty cool, right? You can find a complete list of HTML color names here. Feel free to experiment!

change the width:

You probably won't end up using this one as much, but it's also really easy to change the width of your navbar. I've used this code before to make the width of the navbar match the width of a one-column blog. Again, it's just one line of code:

#navbar-iframe{
width: 1000px;
}

You can change the number in red to make the navbar wider or narrower.

change the position:

I'm personally not a big fan of this one, but depending on your blog layout, it might look better for you to have your navbar at the bottom of your blog. This one takes - gasp- two lines of code. :)

#navbar-iframe{

position:fixed;

bottom:0px;

}

Ta-da!

make it magic:

My favorite trick for customizing the navbar is to make it appear only when the cursor is hovered over it. It doesn't get in the way of the blog design, but it's still there when you need it. You can look at this blog or my blog to see what this looks like - just hover your mouse over the top of the page. This one takes a little more code than the others, so just make sure you copy and paste carefully.

#navbar-iframe {
background:transparent;
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

This code looks more complicated, but it's actually pretty simple. We added a new section of CSS to specify the appearance of the navbar on hover. Then we added a line to specify the opacity (it goes from 0.0 to 1.0), and another one to make sure it works in Internet Explorer (the browser that gives web designers the most trouble).

Like I said, the second part of the code specifies the style of your navbar when you hover over it. You could paste in other code here to, say, change the color of the navbar on hover.
[Just for fun, I changed the color of the Geek Chic navbar on hover so you'll have an example to look at.]

make it go away:

If you really don't like having the navbar at all, even with the hover style, you can get rid of it once and for all. Just use this code: 

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