I’m also wondering how to center the header because I can’t quite get it right, but what you want to play with are these selectors for the bg/mouseover colors:
To change the mouseover background color:
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {
color: #YOUR FEATURE COLOR;
background-color:#COLOR OF YOUR CHOOSING;
}
You’ll probably want to adjust the padding and margins on the bar itself to make those colors span the height:
.main-navigation {
padding-top: 0;
padding-bottom: 0;
}
I adjusted the height of the links to make the padding even up. You might want to play around with the height and padding numbers in this section.
.main-navigation a {
color: #444444;
display: block;
float: left;
padding: 16px 16px 16px;
height: 20px;
}
There could be an easier way to do this for sure, but what’s hardcoded into the css where i’m showing “feature color” is the default green color. The feature color you select in the theme options is going to override this and I’m not 100% how to override that in the css, so I just selected the feature color I wanted. You could try adding an !important to those lines maybe?
