Current Nav Link Styling on Nav Bar Hover

Design help Layout & Design
1

Hi Webflow community :slight_smile:

I’m trying to figure out how to add styling to the current nav link when someone hovers over the navbar (just on desktop). So in theory, if someone is on the about page and they hover over the nav bar, the “About” nav link text will be red and the bottom border will be active and red too.

Of course if I use the general current styling then it styles the link when it’s in the transparent unhovered state which isn’t what I want.

Do I need to achieve this through jQuery?

https://preview.webflow.com/preview/platteklip-vineyards?utm_medium=preview_link&utm_source=designer&utm_content=platteklip-vineyards&preview=0853fb2fec6590a440dd47bed99ec131&workflow=preview

1 Like
2

Also interested to see if this can be done without custom code.

3

I figured it out! But using custom jQuery - would also be curious to know if you can do it without custom code.

For anyone that comes across this post - here’s my solution…

$(‘.navbar’).on(‘mouseenter’, function() {
$(‘.w–current’).addClass(‘nav-link-current’);
});

$(‘.navbar’).on(‘mouseleave’, function() {
$(‘.w–current’).removeClass(‘nav-link-current’);
});

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.