Nav bar submenu links showing in mouse-over color

[Kais]

Hi Bill

My question is about nav bar styles.
When I mouse over a nav item it is displayed in a different color and background color. These colors can be selected in the Customization under Navigation menu.

If I click on a main nav bar item, in the example the About menu, I make About the current page.

If I then mouse over the About menu – all the submenu items are displayed in the hover color but not the hover background color, making it very difficult to read.

However this behaviour is not always consistent, sometimes the sub menu item has the mouse-over color (when the mouse is over a different link) and sometimes not.

Any ideas?

Thanks

Attachments:

1. 

   Screen-Shot-2015-05-14-at-5.34.18-AM.png
   

2. 

   Screen-Shot-2015-05-14-at-7.11.34-AM.png
   

3. 

   Screen-Shot-2015-05-14-at-7.11.08-AM.png
   

[Bill Robbins]

Good Morning Kais,

It looks like the child items there are inheriting the color from the parent item. Let’s change them to be white until they are hovered. Here’s how:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   
   .flexnav li.current-menu-item ul li a {
   	color: #fff;
   }
   

4. Save your changes.

See if that doesn’t do the trick.

Have a great day,
Bill

[Author]

Posts