Changing nav bar color

To change this, enter custom CSS in the Theme Options –> Design. Use the blocks below to create your CSS and paste it in the box on this page that says “enter your custom CSS.”

Note that the nav bar is not a solid color, it’s a gradient. So you will need two color numbers to achieve the gradation.

To change the main nav bar, use this block below – where (#7D7E81, #939598 40px) is the parameters for your gradient. The first number is the darkest the gradient will be, the second is the lightest. These two numbers are the two you need to change to switch your background color. Set them for the same in the whole block (as it is below). So for lime green, something like: (#34EA68, #4CFC7E 40 px) though I didn’t test that so it might be really ugly 🙂

#access {
min-height:40px;
box-shadow:0 0 3px #999;
background:#939598;
background:-moz-repeating-linear-gradient(#7D7E81, #939598 40px);
background:-webkit-repeating-linear-gradient(#7D7E81, #939598 40px);
background:-o-repeating-linear-gradient(#7D7E81, #939598 40px);
background:-ms-repeating-linear-gradient(#7D7E81, #939598 40px);
background:repeating-linear-gradient(#7D7E81, #939598 40px);
}

To change the main nav bar hover color (the box around the menu item), use this block:

#access a:hover,
#access li.current_page_item > a {
background:#777;
background:-moz-linear-gradient(#8A8C8E,#939598);
background:-webkit-linear-gradient(#8A8C8E,#939598);
background:-o-linear-gradient(#8A8C8E,#939598);
background:-ms-linear-gradient(#8A8C8E,#939598);
background:linear-gradient(#8A8C8E,#939598);
color:#fff;
text-decoration:none;
}

To change the color of the menu item for the page that you’re currently on, use this:

#access li.current_page_item > a {
background:#939598;
background:-moz-linear-gradient(#8A8C8E,#939598);
background:-webkit-linear-gradient(#8A8C8E,#939598);
background:-o-linear-gradient(#8A8C8E,#939598);
background:-ms-linear-gradient(#8A8C8E,#939598);
background:linear-gradient(#8A8C8E,#939598);
}

To change the color of the drop down menu items, use this:

.drop-down-toggle {
position:absolute;
top:7px;
right:16px;
display:none;
width:20px;
height:20px;
border-radius:15px;
background:#333;
background:-moz-linear-gradient(#333,#444);
background:-webkit-linear-gradient(#333,#444);
background:-o-linear-gradient(#333,#444);
background:-ms-linear-gradient(#333,#444);
background:linear-gradient(#333,#444);
border:#aaa 3px solid;
}

I think the footer options are under Theme Options –>Topography, all the way at the bottom of the page.

Hope that helps!

• This reply was modified 12 years ago by awinner5.

Hmm. I think there might be something funny with that custom CSS box in the theme options. I created a child theme and used that code and it worked. Maybe try that? (here is info on child themes if you’re not familiar: http://codex.wordpress.org/Child_Themes)

I’m no wizard, just figuring things out bit by bit, so apologies that I don’t have a definite fix for you. It worked for me though 🙂