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?
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.
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.