How to Create a Mega Menu Animation Effect Using CSS and Elementor

Table of Contents

Dive deep into our mega menu to discover our innovative solutions. Experience our custom-crafted CSS magic that brings to life a captivating and smooth Elementor mega menu animation. Explore and be amazed!

Check out the video for insights, and you’ll find the CSS code right below!

				
					/* Sub Menu Dropdown */

.elementor-widget-n-menu .e-n-menu-content>.e-con { {
    animation-name: dropDown !important; 
    animation-duration: var(--n-menu-open-animation-duration); /* You can also define a specific time, e.g., 0.3s */
    max-width: calc(100% - var(--margin-left) - var(--margin-right));
}

@keyframes dropDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
				
			
				
					/* Sub Menu Dropdown - If you have the transition speed turned off try this one instead */

.elementor-widget-n-menu .e-n-menu-content>.e-con { 
    animation-name: dropDown !important;
    max-width: calc(100% - var(--margin-left) - var(--margin-right));
}

@keyframes dropDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
				
			

If this is not working with your Elementor build make sure to check that the classes are the same, the same as in the CSS above. Plus, this only works with Elementor’s new Mega Menu that you must install separately. It doesn’t come pre-packages at this time. 

This is the same CSS code that I use on this website, and all the others I’ve created along the way. 

See screenshot below.

No Comments yet!

Your Email address will not be published.

Recent Articles

Mastering User Centered Design: A Blueprint for Web Designers, UX/UI Pros, and Businesses
User-Centered Design: Weaving Your Artistry with Usability
Securing the Digital Front: Guarding Your Brand's Online Fortress
Designing with the User in Mind: The Transition from Ego-Driven to User-Centric Design
Web Design Revolution: A Journey from AI Dominance to User-Centric Experiences
Picture of Packy Savvenas
Packy Savvenas

Packy Savvenas is a seasoned web designer dedicated to assisting online businesses in achieving their objectives. By crafting and enhancing websites, he ensures broader customer reach and increased product sales.