Adding custom transition to WordPress Elementor Pro Menu

I have this WordPress site for personal project. my wp site I am using Elementor site builder. I built this MegaMenu with Elementor Menu widget. I am trying to add linear transition to submenu. It applies on submenu open but I cant get slide up transition when submenu closes. I tried several approaches including CSS, JS and GSAP library, but somehow Elementor blocks transition on mouse leave/submenu close. I tried the GSAP on code pen and it works fine. Here is the link But Elementor blocks transition out. I even used !important on my css. I would greatly appreciate any help or suggestions. This is my latest code on that WordPress site for this MegaMenu. I dont have any JS code for this menu since Elementor menu widget handles all JS. .e-n-menu-content { transform: scaleY(0) !important; transition: transform 0.7s linear !important; } .e-n-menu-item:hover .e-n-menu-content{ transform: scaleY(1) !important; transform-origin: top !important; } .e-n-menu-item:not(:hover) .e-n-menu-content{ transform: scaleY(0); transform-origin: bottom !important; }

Comment (0)

You’ll be in good company