Change the menu navlink border color on hover while scrolling

Design help Layout & Design
1

Hello All,

I’m new here and I’m new to Webflow.
I have problem with a fixed navbar design. With a section dark background, I need the navbar to be 0% opacity with white navlink font color and white border color on hover. Like this:

image
image1346×398 35 KB

When I scroll down the page, I need the navbar to increase opacity to 100%, white background, black navlink font color and black navlink border on hover.

What I was able to do:
I can set up interactions, I’m almost done but one thing: I cannot change the scrolled border color to black on hover. With an interaction to change border color, the border will permanently change to black even on top of the page and will not work as intended.
Here is another website that serves as a model:

So the problem is the scrolled border color to black on hover.
This is how it looks now:

image
image1348×467 20.6 KB

Thank you

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

For now, you must use custom CSS to solve this (No way to solve this by the way you tried).

Very simple way to solve this is to add active class on scroll - and than use custom CSS:

<style>
.navbar.active .nav-link:hover {
    border-color: rgb(0, 0, 0); /* black */
    color: rgb(0, 0, 0);/* black */
}
</style>

You should toggle the class active by simple jquery.

Guide here:

After this - No need for any interactions.