Streaming live at 10am (PST)

Nav Bar Underline Animation Works On One Page

Hello everyone!

I’m currently having an issue regarding a website I’m building where links are supposed to animate the horizontal scale of a div underline inside a nav link block and change the text. This works on the homepage, but it doesn’t work on all of my other pages. On my other pages, only the first link appears to use the interaction. I’m not sure why this is occurring as the navbar is a symbol and I made sure that I wasn’t editing it specifically to the page I was working in. I don’t know what would cause this and after reviewing the way I setup my interactions, I’m still confused as to why it would work on one page with all links, but then have only one link work on all other pages. I’ve attached screenshots below to show the issue and to show the way my interactions are setup.

My setup has worked before in the footer of the site, which is also adding to my confusion. Is this due to the way Webflow setup their navbar item?

Thank you in advance for any help you provide!


The site’s published URL: https://vanessa-rodrigez-photography.webflow.io

The site’s shared readable link: https://preview.webflow.com/preview/vanessa-rodrigez-photography?utm_medium=preview_link&utm_source=designer&utm_content=vanessa-rodrigez-photography&preview=823ab618e675fb11c2e1cfdeebfdf530&mode=preview

Hello!

Brandon here with the Webflow Customer Support Team!

I will be happy to help you with your question regarding Nav bar menu interactions.

Even though you have it set to the trigger, you will need to link this interaction to each nav menu item. Just right click on the timed action and link it to the item you wish to affect.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

Hello @WebDev_Brandon!

Thank you for the swift response, I really appreciate it.

On your response, I guess I have a couple of questions. Does this mean that I have to make multiple timed animations just to affect each navigation item? Also, why is it that the footer is able to handle this but the navigation isn’t?

My last question is how do I make sure that the animation is disabled when the page is focused?

Best,
Andrew

Update
Webflow support managed to provide assistance to me on the topic of the hover animation. If anyone needs this in the future, here is a link showing how it was fixed.

I still however am not sure on how to get it so that the underline is present, the text is darkened, and the animation is disabled when the page is present.