Navigation Bar Hovers, etc.

[jimnyc62 0]

I just added a specific image to the background for my navigation bar. I figured out how to change the color of the text (it was a shot in the dark). Now I need to figure out how to get the correct hover colors and a darker color once you on a certain page so that the text shows up. But I'm not sure if it's secondary, tertiary, etc. And I don't want to start changing things that are going to mess everything up throughout the site when I may want to return to many of the defaults later. I'd also like for the open page in the nav bar to either be white with black text or a darker color with white text. Not sure if I can do the white/black with the way it's configured with the jpg image in there. http://jimlochner.com

[jimnyc62 0]

It also seems like I enable the drop-down navigation or the arrows without it completely whiting out the buttons on the nav bar.

[cshoffmann 0]

Here's a screenshot of the Current Page background setting and the Hover Background Setting: http://screencast.com/t/tDSUBtCobN You may add this to your custom code for the current page item background and text color: .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, { background: #colorhex; color: #textcolorhex; } Be sure to put you color hex values in the above. Here's a screenshot of the change made in your site via Chrome Inspect Element tool: http://screencast.com/t/jB4jxpi8qITt If you have another background image file that matches your blue ones then you may right the background css rule like this: background: #colorhex url(http://image file path) repeat-x;

[jimnyc62 0]

Thanks Shaun. That helped a lot. I'm not sure they're the colors I want yet, but at least I know where to change them. Thanks so much.

[jimnyc62 0]

@Shaun - I reopened this thread because I'm still having problems. Hopefully you'll see this. I have two separate pieces of CSS code, part of which came from your answer above. #nav_row{ background: #225e9b url( ) repeat-x;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, { background: #225e9b; color: #000000; } I don't know if one cancels out the other, especially since I'm not that CSS savvy yet. But I need to allow the drop down navigation and the arrow. When I enable them, it whites out the part of the nav bar where the buttons are. If you hover over them, the proper colors come up. But I need that special jpg files that is the entire nav bar to show in the background. So I have two questions: 1) Are those two pieces of code correct? Or can one be eliminated? 2) How can I fix it so that I can still have my jpg always showing, except when you're on a page and then the button in the nav bar is showing the blue I chose (which it does at the moment), PLUS adding the drop down and arrow (that's the tough part)? Many thanks in advance. Jim

[cmunns 16]

the arrows, when activated add classes to the menu thus making your current code in need of an update.

[jimnyc62 0]

@Adam - What kind of update do you mean? Sorry for the stupid question.

[Kate 3]

Hi Jim, If I understand Adam correctly, he's referring to new classes on the menu items. View the menu items, check out the class, and you may need to modify your CSS.

[jimnyc62 0]

Kate - Yeah, I'm sure I need to modify something, but this is above and beyond my technical comprehension. I've Googled and went to the 3schools.com CSS stuff that Pagelines always recommends, but it's like reading Greek. So far I've been winging it with the CSS, thanks in no small part to all the great help on this forum. But I have no clue what to do here.

[cmunns 16]

I'll need to see it activated again to help pinpoint the specific rule.

[jimnyc62 0]

Adam - I've activated the drop down, shadows and arrow. Thanks for taking another look at this. I really appreciate it.

[cmunns 16]

` body #page, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: transparent!important; } `

[jimnyc62 0]

Adam Munns...miracle worker. Thanks so much for your help, Adam.