Navigation links greyed out on hover

Site URL: https://www.andreaaresu.com/

Hi everyone!

I'm trying to achieve the same effect as shown in the video attached below.

When hovering over a navigation link on the header, I want the "active" one to stay black while the other links gets greyed out.

Can anyone please help with this? Thank you.

Andrea. 

Add to Design > Custom CSS

/* nav hover */
nav.header-nav-list:hover a {
    color: gray;
}
nav.header-nav-list:hover a:hover {
    color: black !important;
}

Thank you, tuanphan.

Unfortunately, it doesn't seem to be working.

I see it works here. Try changing to red/green to see it

/* nav hover */
nav.header-nav-list:hover a {
    color: red;
}
nav.header-nav-list:hover a:hover {
    color: green !important;
}

It works!

For some reason I wasn't able to see it while on the "editor mode".

Thanks for your time, tuanphan.

Sorry to bother you again, @tuanphan.

Don't know why but the code suddenly stopped working.
Is there anything I can do to solve the issue?

Thank you.

21 hours ago, AA_viz said:

Sorry to bother you again, @tuanphan.

Don't know why but the code suddenly stopped working.
Is there anything I can do to solve the issue?

Thank you.

Just tested & it still works here. Can you try it again?