Button active state not working

Hi guys! I’ve been working with my navbar a while now and no matter what I try, I can’t fix this problem.

I have created an animation hover effect on my buttons. And I have also add a page load interaction to my botton to get an active/current state to know on which page your on.

It seems like the hover effect mess with the active state that I’m looking for. I want the active state to stay with a black BG and a white text.

Here’s my link
https://preview.webflow.com/preview/soul-62e55a-299ac10c009ae1df03b1e019290?utm_medium=preview_link&utm_source=designer&utm_content=soul-62e55a-299ac10c009ae1df03b1e019290&preview=29ae9449b85b5ffbc7b203b86ac0a155&pageId=634be46ae8327edbb22cce0b&workflow=preview


Here is my public share link: LINK
(how to access public share link)

Hi Sandra,

Unfortunately, as far as I’m aware, Webflow doesn’t yet offer support for the CSS :not() selector, so you can’t target only only non-current menu items with your Interactions.

One way around this is to use a small custom CSS chunk to override the interaction styles with your desired selected style. The interaction would still happen, but the user would never see it because your style take precedence by using the CSS !important flag.

To do that, drop an HTML Embed into your nav symbol, and paste in this css;

<style>
.nz.w--current {
    background-color: #000 !important;
    color: #fff !important;
}
</style>

You’ll be able to see this working even in the designer preview mode, which is pretty cool.
The downside is, if you change what your interactions do, or change how your current item is styled, you’ll need to update your CSS chunk accordingly.

@memetican thank you so much for the help! Wouldn’t have solved it without your help!