How to Style the selected and hovered items in the Nav control

[mhomol]

I need help in styling the Nav component's hovered and selected states.

I have a backgroundColor supplied for root that is working great along with color being set in linkText and 'chevronIcon`, but I'd like to invert the color of the link on the hover and selected states so that it's the darker color I'm using for the background of the Nav. This seems like it should be really simple but I'm completely stumped. Can someone help me here?

Notice in the screenshot that the top group item is selected and the bottom item is being hovered over:

[khmakoto]

Hi @mhomol, this is unfortunately a quirk in how Nav is styled, but I think you should be able to achieve this similar to how I did in this codepen.

Let me know if you need more help.

[mhomol]

OMG thank you so very much! This is precisely what I was looking for

[khmakoto]

Happy to help!

[D-Impulse]

Thank you very much @khmakoto, you are Saviour 😍🙌

[khmakoto]

Glad this answer is still helpful!