Inline Navigation CSS for hover state on Pro Theme

[hivehouse]

I cannot seem to find the correct CSS to override and individual menu items text hover state. I added a custom class to the menu in the Wordpress menus panel. I’ve already successfully modified the background color for it on non-hover state. However, I need to change the text color to something different on hover.

What’s the correct CSS to target menu options. :hover on the various HTML tags didn’t seem to impact anything.

[ruenel]

Hello @wbgTHEMECO,

Thanks for writing in! I am not sure what stack or how your menu were set up. If you already added a custom class in your menu item, you may need to use this code:

.menu-item.custom-class .x-anchor-menu-item .x-anchor-text-primary {
  color: red;
}

.menu-item.custom-class .x-anchor-menu-item:hover .x-anchor-text-primary {
  color: green;
}

Feel free to change the colors.

[hivehouse]

Thanks, the CSS path worked for me. I kept attaching hover to tags versus the css class.

I am using the Integrity stack and noticed that the only way the hover state would work is if I used !important.

Would that be expected, even when using a custom class like I did?

[ruenel]

Hey @wbgTHEMECO,

The !important is only necessary if there is already a custom css or another set of css blocks that changes the color of the element item.

Hope this helps.