Create an Animated Hamburger Menu using Elementor

Animated Hamburger Menu

Animated Hamburger Menu CSS

				
					selector{
–gap: 0.25em;
–weight: 0.05em;
–width: 0.8em;
}
selector .elementor-menu-toggle{
position: relative;
}
selector .elementor-menu-toggle:before,
selector .elementor-menu-toggle:after,
selector .elementor-menu-toggle i:after{
content: “”;
height: var(–weight);
width: var(–width);
position: absolute;
background: currentColor;
top: 50%;
left: 50%;
transform: translate(-50%,calc(-50% + var(–gap)));
transition: all 0.3s ease-in-out;
}
selector .elementor-menu-toggle.elementor-active:before{
transform: translate(-50%,-50%) rotate(-45deg);
}
selector .elementor-menu-toggle:after{
transform: translate(-50%,calc(-50% – var(–gap)));
}
selector .elementor-menu-toggle.elementor-active:after{
transform: translate(-50%,-50%) rotate(45deg);
}
selector .elementor-menu-toggle i:after{
transform: translate(-50%,-50%);
}
selector .elementor-menu-toggle i:before,
selector .elementor-menu-toggle.elementor-active i:after{
opacity: 0;
}
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest tutorials

Freelancer Mojibur
freelancer mojibur

Start a Project!

Interested in working together? Send a quick message or schedule a meeting. Ask questions, discuss details, and decide if we are a good fit.

Website Project Inquiry

This form helps me get a general idea. We’ll schedule a meeting soon to discuss everything in more detail!

Freelancer Mojibur

Contact person

For quick communication email at: freelancermojibur@gmail.com