Hi all, I can’t get this nav to work properly, the hovers are set-up all the same, I’ve played around with combo classes, one works the other do the opposite of what they need to do, all I want is text to be white, then when you hover a underline animates underneath and the text goes to 40% opacity, the Contact us works, the other two don’t? What am I doing wrong? They are all set-up the same?
1 Like
You can achieve the same hover effect using pure CSS, without any JavaScript or complex interactions. CSS is faster and smoother, lightweight and fast (no extra JS).
- Remove all existing interactions from your menu links.
- Open your Page Settings, scroll to the Custom Code → Inside
<head>section, and paste the following style:
.menu-link:hover .menu-underline {
width: 100%;
}
.menu-link:hover .menu-text {
opacity: 0.4;
}
1 Like