Streaming live at 10am (PST)

Custom menu animation


#1

Here is my public share link

I'm trying to customize the menu transition, so I've built a new menu (not using webflow's standard nav menu) and made the transition in webflow. The menu button animation works, but the 'menu appear' doesn't. I've done it via jquery in custom code anyway, but I'd rather use webflow's transition.

Waldo already told me to use a "Navbar Open/Close" instead of a "Click" trigger, and I've tried publishing changes using Chrome's incognito mode without extensions.

Any help?


#2

Hi @erikdana thanks for posting this!

The issue here is that the "Nav Menu" is not a child element of your "Menu Button".

Right now you have the interaction set to "Limit to nested elements" (this means that it only affects elements that are child elements to the element you have selected)

The "Nav Menu" element is not a Nested element, nor a Sibling element to your "Menu Button" as they do not share the same parent and the "Nav Menu" is not inside of your "Menu Button" element.

So just un-check the "Limit to nested elements" option and the interaction should work as expected:

Here's a GIF showing the behavior:


#3

Thanks! That was a rookie one, sorry :blush:

Still not working on published or preview website, though :confused:


#4

@erikdana it looks like you removed several elements/rebuilt elements within your navbar so that navbar interaction wasn't taking. If you switch your "nav-menu" interaction back to the "click" interaction that does the trick:

Here's a GIF showing the behavior after doing so: https://cl.ly/0U2Y2j0U1P18

You'll also need to delete the custom code from your site wide settings as they override the interaction that's been built.


#5

Perfect! thanks :slight_smile:


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.