Streaming live at 10am (PST)

Disable Interaction for one state within a symbol - SOLVED

Ok so I have an interesting issue, although it is rather small.

My navigation is a symbol I’m using on every page. I have an interaction on each nav link when hovering over it changes the type color from gray to white and changes the background color from transparent to red (I know I can do that with hover states, but I’m using an interaction because I want a fill animation.) When you’re on the “current” page, I’d like to indicate that in the nav by having the red background and white type (example below). However, because of the hover off interaction I have on it, it changes type back to gray. I realize I could break the symbol on every page and customize the nav accordingly on each individual page, but I was hoping to not have to do that.

Is there a way (perhaps using custom code) to disable an interaction on a link only when in the “current” state?

Does that make sense?

Here is the site I’m referencing (it’s still a work in progress…desktop only right now, I have not done any of the responsive states yet): https://homedr.webflow.io/

You’ll see my issue I’m talking about if you click to either the Roofing, Windows & Siding pages. As soon as you hover over the current page you are on in the nav the type goes back to gray because of the interaction.


Solved this, explanation below

Never mind. I came up with a work around, Instead of the interaction changing the type color, I just created another version of the type in white set to absolute right over top of the old one, hid it from view and then showed it using the interaction. Then I hid it with the hover off, and it seems to have done exactly what I wanted.