Streaming live at 10am (PST)

Nav hover interaction not behaving as it should

#1

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 https://www.youtube.com/watch?v=e2JnU6wbPGk

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 http://brand-counsel-testing-site.webflow.io/nav-bar-testing

animated-dropdown-toggle

Any help greatly appreciated.
Cheers
Grant


Here is my public share link: https://preview.webflow.com/preview/brand-counsel-testing-site?utm_source=brand-counsel-testing-site&preview=1164d06fa9ce2e9a95e9fafe8e3e4ae1
(how to access public share link)

1 Like
#2

Hey @grantsenior

See here > https://www.useloom.com/share/5f3027bea1224e5b9e0e1549063f968f

Piter :webflow_heart:

#3

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!
Grant

1 Like
#4

It’s super easy! :webflow_heart:

#5

Thanks Piter! Worked well!

1 Like
#6

Hi Piter,

Here’s where I ended up with the drop-down nav animation https://arrow-uniforms-tweaks.webflow.io/clean-animated-navigation

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?

Cheers
Grant