Hello, I’ve got some animations setup to a hover interaction for each of my nav links. A small accent above the text in a form of a div that scales in width upon hover. I’ve also got a box-shadow that shows upon clicking a link for the current state/page.
The problem is an inconsistency where all three nav links will show the accent above the text for the current state instead of just the one that was clicked.
Any idea why this is happening?
Please add a Share Link to the post for this particular project!
Link to the project added. Thank you!
Brad,
The issue for you is that you have it setup in a List block instead of just using normal div blocks.
I would also recommend not limiting your accent divs to a defined width. Use your interactions to change the action on the “accent” and when it is set on current page it will have the full width.
Hope that helps!
Ok, made some adjustments to get rid of the list block. I’m still seeing issues where clicking on the first link and back multiple times will show the accent for all items at once. Not sure if this is a webflow bug or some weird thing I’ve put in place that is causing this inconsistency…
That aside, I’m still having issues setting the current state for a clicked link to keep the accent in place.
Im gonna have to think on this and get back to you. If you figure it out before I do, please let me know.
Anyone else have suggestions?