How to: fade out other nav elements on hover

Design help General
1

hi there!

I’m trying to figure out how to let other navigation elements fade out when I hover on a link. Here’s an example: https://www.girlboss.com/

How do I do that in Webflow? Can anyone help?

Thanks! :slight_smile:

2

You can do it easily with the IX2. Just put all the nav elements into one div (making them siblings), then create new interaction for the hover on the nav element with this kind of parameters. Your initial target should be any nav element.

Here it is in action

1 Like
3

Ah thankyou! I was making it way too complicated :stuck_out_tongue:

4

Hi Dram, i’ve encountered a similar problem, I was wondering if you could put the link with the parameters live so that I could follow along. Many thanks.

5

Sorry, those files and projects are long gone.

But do it as follows:

  • all nav elements are in the same div so that they are siblings
  • add interaction for on hover. Make any of the nav items fade out, target should be - “affect class”, select “only siblings with this class”
  • add hover out with the same target.
  • add this interaction to all nav elements