I’m using nav nestable and trying to add an animation to the mobile menu so it slides down from the top when opened and slides back up when closed. Currently it just instantly appears and disappears. I can’t see an obvious way to do this directly in nav settings, so have added an on click slideInDown animation to the Toggle Open that targets .brx-nav-nested-items. This works well and the menu slides down nicely. However, when adding the converse slideOutUp animation to the Toggle Close, again targetting .brx-nav-nested-items, it doesn’t slide the menu back up it just disappears when closed. My guess is that there is something under the covers that is instantly hiding the menu when the Toggle Close is clicked, thus making the animation irrelevant.
Does anyone know a workaround to this, or perhaps a better way to get the mobile menu to slide in and out from the top?
My workaround was to target not the .brx-nav-nested-items, but the div that holds all the items. It’s the “Nav items” block that gets created when you make the Nestable nav. I target the CSS id directly in the nimation.
For closing the menu, I target the same exact element. I make two interactions; the first starts animation to slideInLeft (or out) and is triggered by click, the second is triggered by end of previous animation (specify the interaction ID!) and adds/removes attribute (key is class and value is brx-open), and targets the Nestable Nav element. I have these sets of animations on the hamburger to open the mobile menu, and an X icon I added to close the menu.
Thanks so much!! The brx-open was the missing piece of the puzzle. I had to delete the default toggle close element that comes with Nav Nestable as that seems to instantly remove brx-open when clicked regardless of any animations. Added my own close icon and added the 2 animations you mentioned and all works perfectly. The default toggle open works fine with just the slide animation as that looks to already add brx-open, so no need for me to add it explicitly. Thanks again!