I wonder if I can continue this thread a little.
I have successfully added custom CSS to change the background color for the menu site-wide to an olive green color and retained the transparency. The menu text color is the default white which I want to retain. I have also managed to change the text color on hover ON THE HOME PAGE to #663300 (a shade of brown) and also the “currently selected” page to the same shade of brown. The code I used is this:
.main-navigation .current_page_item > a,
.main-navigation a:hover {
color: #663300!important;
}
HOWEVER, on all other pages/categories other than the Home page, the menu items become black on hover. Whilst this might be considered a subtle difference (black compared to brown) it’s driving me mad that I can’t fathom out the CSS to make the black become brown! It’s only the color on hover that I want to change. Can you help me with the correct CSS please?
Thanks very much.