How to keep hover underline visible on active nav link

Design help Animations & Interactions
1

Hi everyone,
I’m working on a navigation bar in Webflow where each nav link has a custom underline animation on hover — using a transform that moves an underline div from offscreen into view (X: -105% to 0%). This part works fine.

What I’m trying to do is **make the underline permanently visible on the nav link of the page the user is currently on — for example, when I’m on the “work” page, I want the work link’s underline to stay in place (X: 0%) — but only on that page and without affecting the hover animation on other pages

LINK: Webflow - Copy of pietrocops.com

Has anyone solved this using native Webflow tools (interactions + states) — or is a little bit of custom CSS the only way to do this cleanly?

2

Hi there!

While Webflow’s native Style panel supports basic text decoration animations, implementing an underline animation with X-axis transform properties requires custom CSS. Here’s what you can do:

You can add a custom CSS code snippet in your project settings to create this effect. Create a :before or :after pseudo-element on your nav links, style it as an underline, and animate its transform property. You can also use the Classes panel to add specific classes to your navigation elements to trigger these animations.

For page-specific states, you can utilize Webflow’s built-in body class system, which automatically adds unique classes to each page’s body element. This allows you to create conditional styles for your navigation underlines based on the current page.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hey @manfredicops,

Yes there’s a Current state that you can use to style the navigation items with an underline which will show up if they are on that particular page. If for some reason, you are not able to see the “Current” state for navigation links, you could try out this workaround to see if it solves the issue.

Alternatively, you could target such elements via custom CSS, if you prefer it that way by targeting navigation items with the class .w--current which is the class that gets applied when the navigation item points to the current page. So you can apply the custom CSS by targeting elements with that class and it should solve your use-case. Hope this helps.

4

i’ ve been trying to use the current state to affect the element on that specific page, but it seams i can’t manage to affect only one element, all of my links get affected. also i understand how to use webflow but i’m not capable of writing a code for what i would like to achieve. what code should i use? do you maybe know?

5

Hey @manfredicops,

Yes a simple custom CSS should do the trick. So you could paste the following in the Head Code section of the site settings under Custom Code tab.

<style>
    .nav-link.w--current {
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 5px;
    }
</style>

You could further customize the design of it, but this is roughly what you need to solve your use-case. Hope this helps.