Archived topic
Animate mobile submenu toggles on close (open transitions already working)
3 replies · Started by Nik on October 5, 2021
Hi guys,
I've spent a bit of time with the basic mega menu CSS you've provided in the past, and other threads on here about animating the basic mobile menu (not the off-screen overlay/slide-in panel).
So I've got my menus where I want them except one small thing. When opening submenus on mobile, I've got a basic transition animation working in CSS using the max-height thing you've mentioned to other GPP users. But I can't figure out how to have a similar action on closing each submenu - it's just instantaneous. I've tried a few things with toggled and :not() toggled classes but no luck.
Are you able to point me in the right direction please? :)
Thanks very much!
Hi there,
try changing this:
.main-navigation.toggled .main-nav ul ul {
display: block !important;
max-height: 0;
overflow: hidden;
height: unset;
opacity: 1;
transition: max-height 0.3s ease-in-out;
}to:
.main-navigation.toggled .main-nav ul ul {
display: block !important;
max-height: 0;
overflow: hidden;
height: unset;
opacity: 1;
transition: max-height 0.3s ease-in-out;
position: initial;
visibility: unset;
}Hi David, that works perfectly. Thank you! :)
Glad to be of help!
