Streaming live at 10am (PST)

Nav animations breaking


#1

I’m having some issues with my navigation animations:

  1. If you look at “Home” of “Contact” the navigation hover effects still work. However, they are broken on the “About” page.

  2. I add in page linking from the Link Block Settings window but I’m it doesn’t seem to be adding the “Current” state. Is there something I need to do add the “Current” state in a reused Navbar Component?

I’ve watched the Navbar videos and States videos and couldn’t find an answer.

Thanks!

https://preview.webflow.com/preview/nav-sandbox-0ab2c30f548d2ff9d613071dadd?preview=790cba74a5ace34bc6930348d53c59e1


#2

I can’t seem to replicate the problem, nor can I see hover states as your sliding line is an interaction animation. It does however seem to glitch where both the about and contact links have the underline showing on page load without having to hover but I believe this will not be the case with a published version of the site.

If there was to be a text effect of some kind that happens on hover I didn’t see it.


#3

The hover state I’m referring to is the interaction I set up. Sorry about the confusion. But you are correct, they did both work in a published setting. I wonder why that is. So in this example, with a reused Navbar component as a symbol, what do I need to do to set up the “Current” state so that when you click into “About” the about button is “on”?

Thanks for the help!


#4

When you are on the desired page (About) double click on your symbol (Nav) allowing you to edit, then select the nav link (About). This will engage the current state. I do not believe that there is a current state for interactions so what I would suggest is that you remove the margin from the button container and add it to your actual nav link block. Then in its current state I would add a border to the bottom of 2px to match what you already have.

This will replicate the appearance that you have with the line but on hover the animation will scroll across above the border.

The way around it is to have the underline within the Nav Link block not the link container as that will then be hidden with the bottom border. (I really hope that makes sense)


#5

Thank you so much. That worked perfectly. It took me forever to get the Bottom border and “underline” lined up but basically that “Button Container” was not needed so I rebuilt the buttons like you talked about and it works like a charm. Again, thank you so much!!