Change all Links Color on Navbar hover

Dear Community,

I have trouble with a very simple Navbar Styling.
All Links should change color when hovering over the Navbar, then change color again when hovered over directly.

Here is where I got my Navbar inspiration from: https://www.framer.com/

I was able to change type font size or opacity on hover over the parent element. But I am not able to change the font color.

Best Regards,
Georg

Hi @Kloeckwork,

Welcome to the Webflow community.

Can you provide a read-only link to your project so we can see how you are approaching the interactions.

Cheers
Keiran

Hi @knk,

thanks for the suggestion. Here is my link:

https://preview.webflow.com/preview/georgs-groovy-project?utm_source=georgs-groovy-project&preview=3ed74063d426332d8555ad0636884569

This is the goal:
ezgif-4-552d38a19ffd

The goal is to have the font color black if there is no interaction with the NavBar.
Then change the font color of all navigation items to light grey, when there is hovering over the NavBar, but keeping the font color of the navigation item directly hovered over black.

Thank you for suggestions :slightly_smiling_face:

Hi @Kloeckwork,

Thanks for the read-only link.

I’ve had a play using interactions. Hopefully, it’s the desired effect you’re after.

A lot to explain, so might be easier to make a quick video for you.

But in summary here’s what I did:

  1. Removed all of your styling on the following elements:
    item, Navigation Items, Navigation Wrap
    So I could work with a clean ‘canvas’ to create the interaction
  2. Set a hover state on ‘item’ (nav link) to Black
  3. Set a current state on ‘item’ (nav link) to Yellow (or whatever colour you want. I used yellow to ensure I could see the obvious difference in colour)
  4. Created an interaction on the ‘item’ element with 2 actions: nav-hover-on, nav-hover-off
  5. nav-hover-on will change (item) text colour to Grey, apply to Class and affect siblings with this Class
  6. nav-hover-off will change (item) text colour to Black, apply to Class and affect siblings with this class.

Will post a video shortly.

Let me know if it’s what you’re after
Keiran

2 Likes

Here’s a link to video for you.
Hope that helps.
Keiran

2 Likes

Dear Keiran,

I blown away by your video – thank you so much!
If you are ever in Berlin, Ill buy you beer :slight_smile:

All the Best,
Georg

2 Likes

Hi there, How is this possible within a collection item? - Have attempted the same interactions, but it’s not working at all :frowning:

Hi @Ignacio_G,

Can you elaborate a bit more as to what you are trying to achieve.

Cheers,
Keiran

Hi Keiran,
In the projects section, we’d like to hide and unhide other links as you hover or unhover a link item (loading as a collection item). At the moment we have achieved the hiding and unhiding part. However there is a delay in the unhiding.

Project: https://preview.webflow.com/preview/sensory-1?utm_medium=preview_link&utm_source=dashboard&utm_content=sensory-1&preview=e688b797b5118b6d5591278b300b0398&mode=preview

Hey Igancio,

nice work on getting the interactions set up the way you wanted.

The reason for the ‘delay in unhiding’ is due to the ‘Work Image Out’ interaction - there is a delay of 0.5s between opacity and show/hide.

If you time them together then the delay will no longer occur.

See images below to get the desired effect.

Hope that helps,
Keiran

This was very helpful mate, appreciate it!

Hello! I am also trying to change all links color on a Navbar hover. I applied an interaction to the nav link class, but it only changes the background of the nav link and I would like for it to change the background on the entire nav bar. Additionally, I’d like to be able to hover over any part of the Navbar and have the links change color. I’m styling based on Everlanes nav bar: https://www.everlane.com

Read only link: https://preview.webflow.com/preview/oath-pizza?utm_medium=preview_link&utm_source=designer&utm_content=oath-pizza&preview=63ee539b84574e85644b28a1ae2ea866&mode=preview

Thank you!
Merissa