Changing color of menu item on active page

I've been trying to target - via custom CSS - the color of the main menu link for the currently active page. Currently, on currently active pages, the menu link for that page remains dark gray while the link background is orange (we're using the default color scheme). This color combination is not so easy to read; on some monitors, it's nearly impossible.

What I'd like is to color that link text white - as it is when we roll over it (see the two attached images - one's just the active page while the other shows the mouse roll over state). Whenever the link background is orange, we want the link text to be white whether or not we're on that page.

I haven't been able to figure out which elements to target in order to get that to happen. Can you help, please?

Thanks!

 

Hello,

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

#menu .ddsmoothmenu li a {
text-decoration: none;
color: #fff;
background-color: #e7a007;
}

Thanks & Regards
Pramod Patel

 

Thank you for this but it's not actually what I was looking for.

The user clicks one of the menu choices and is taken to the selected page. ON THAT PAGE, the corresponding menu link is highlighted with a colored background - which is fine - but the text (except when the mouse is hovered over it) reverts to the dark gray default, which is difficult to read over the colored background. What I'm trying to do is make it so that the menu link corresponding to the page the user is currently on is highlighted with BOTH the colored background AND white text for legibility.

 

Hello,

We got it please provide us url of your website.


Thanks & Regards
Pramod Patel

 

coloradodo.org

 

Hello,

Goto
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

#menu .ddsmoothmenu li a
{
color: #4B4A4A;
color: #507295;
}

Replace it with following code in your Custom CSS

Code:

#menu .ddsmoothmenu li a
{
color: #fff;
}

Thanks & Regards
Pramod Patel

 

Sorry for not responding more quickly, but --

No, you see once again that changes ALL of the menu items - not only is this not what I need, it also renders all menu items EXCEPT that of the current page unreadable against the white background.

What I want to be able to do is to change ONLY the color of the menu item corresponding to the page currently loaded into the browser. I want that menu item and that menu item only to indicate you're on that page via the colored background and white (instead of gray) text. In the attached screenshot, you see how it looks when the mouse is hovering over it. Upon mouse exit, however, the text reverts to gray...even though the background remains orange. I want the text on that menu item to STAY white even when the mouse isn't hovering over it.

 

Hello,
Replace all above CSS with this CSS

Code:

#menu li:hover a, #menu li a.selected, #menu li.current_page_item a {
color: #fff;
background-color: #e85a05;
}

Thanks & Regards
Pramod