Line under nav-link disappears when ON the page. How to make it visible?

Hi,

When I am hovering my nav-links there is an animation going on where you see a line appearing underneath it. But when you click on a nav-link and you are directed towards the page, the line doesn’t stay under the nav-link. So it’s much harder to see which page you are on.

How to make the line stay underneath the nav-link when you clicked on it?

My site: https://preview.webflow.com/preview/traffic-more?utm_medium=preview_link&utm_source=designer&utm_content=traffic-more&preview=4d590a1857bcf417d03130c79efd611c&mode=preview

Hi,

Because you’re using interactions to show this line, it will be very difficult to activate the line if the page is visited. This is because you would need a ‘when clicked’ interaction for every link, plus another one to turn all of the others off when a different page is visited.

The best way around this is to use :hover, instead of interactions for this. If you go down this road, you can style :current elements so that when the user is on a page, it styles the link associated with that page.

Hi James,

I am trying to make use of the hover state and such and disabling the animations triggers. But I seem I can’t make it work the exact way as with the normal animations.

For example I need to make a new div which is the line underneath. If I make the line in the nav-link div, the new line pushes the text up.

If I use a new div for the line, you have to hover over the line instead of the text to make the animation work.

I hope you understand me!