Create hover effect in menu that is linked to an animation

Design help General
1

Dear helpers,

Is there a way to create a hover effect (i.e. turn text color to red) for the menu items in the menu on the main page? I’m having trouble because the menu is linked to an animation that changes the background color and text color of the menu. If I change the text color for the menu item with “hover” activated in the style selector, it simply doesn’t show (I think because the animation overwrites it?).
Could you help me solving this issue?

Thank you in advance,

Sophia

Here is my site Read-Only:
(Webflow - Peak to Pixel)

2

Hi Sophia,

Here’s how to style your navigation links and add hover states:

  1. Select your navigation link element
  2. In the Style panel, check the Selector field to ensure there’s a class applied
  3. Click the Selector dropdown menu and choose the “Hover” state
  4. Adjust the text color or any other styles you want to apply to the hover state
  5. For a smooth transition effect, expand the Style panel > Effects > Transitions section
  6. Add a transition for the properties you modified (like color)

Remember to apply the same class to all your menu items to maintain consistent styling across your navigation.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hey @SophiaE,

I can see 2 actions for .nav-link.default class and both set the text color to black, since its black by default anyway, could you remove those 2 actions from the animation? That seems to render the hover effect perfectly as you need and removes the redundant actions.

But in case you need those text color actions in the animation and plan to have some other color than black in future, you could setup an interaction on the nav links specifically and trigger it on Mouse hover and set the text color to Brick red. That should work for your use-case too.

To keep it simple, you could take the first approach. Hope this helps.