Inline Navigation CSS for hover state on Pro Theme

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.

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.

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?

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.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.