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 Nav bar testing
Any help greatly appreciated.
Cheers
Grant
Here is my public share link: Webflow - Testing Site
(how to access public share link)
1 Like
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
Thanks Piter! Worked well!
1 Like
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
