Streaming live at 10am (PST)

Nav hover interaction not behaving as it should

Hello. I am modifying the nav bar dropdown menu items using the Interactions so that on hovering over the toggle item the drop-down list animates down rather than just toggles on/off. I am referencing this Webflow video to make it happen

The problem is that the hover trigger works fine in making the drop-down list appear, but for hover-out the action is not right. If the mouse leaves the toggle item by exiting the toggle trigger to the left or the right the drop-down list toggles off rather than animating off. However, if the mouse leaves the toggle trigger in a downwards motion (exiting below trigger) the animation is correct. How do I fix it so that the hover works correctly for all exiting motion?

Here’s a published test


Any help greatly appreciated.

Here is my public share link:
(how to access public share link)

1 Like

Hey @grantsenior

See here >

Piter :webflow_heart:

Hi there, looks like you have a solution there, thanks. I’ll have to study that carefully and see if I can get it to do the same.
Thank you!

1 Like

It’s super easy! :webflow_heart:

Thanks Piter! Worked well!

1 Like

Hi Piter,

Here’s where I ended up with the drop-down nav animation

It’s okay in that now, the open close action is just right, the close drop-down nav works when exiting from all angles, but as you can see there’s an issue with the blue bar beneath the nav that gets pushed down; Opening each drop-down nav item singularly, there is no problem, but if the mouse hovers over Who We Are then moves directly to What We Do and then Our Customers the blue bar’s positioning action gets confused, sometimes it’s being turned off when it should be on. Each hover in/out interaction has an action to control the blue bars position (pretty much the same for all three).

I’m not sure why this is happening, wondering if you might have some thoughts?