hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to create an animated hamburger icon with Elementor Pro. This is the v2 of a previous similar tutorial but with a different (easier) technique.
Animated Hamburger Icon With Elementor Pro
First of all, let’s give credit where it’s due because this tutorial is based on the code from Refracted Color.
This tutorial is video based (check above), but below you will find the code needed to complete it.
Popup Code
- click on the gear icon (bottom left corner of the editor page) in order to edit the header Settings,
- then Advanced > Custom Css and paste the following code:
selector {z-index:9998!important}
Header Code (HTML Widget)
While editing your custom Elementor Pro header, add an HTML widget, and paste the following code (and make sure you replace the CHANGEME part of the code by the popup url, as explained in the video):
<div id="mynav">
<a href="CHANGEME">
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#nav-icon').click(function(){
jQuery(this).toggleClass('open');
jQuery('.fullscreen-nav').toggleClass('open');
});
});
</script>
Global CSS Code
- click on the hamburger icon (top left corner of the editor page)
- click on Site Settings
- then Custom Css and paste the following code:
#mynav {
position: absolute;
top: 0!important;
right:0!important;
}
#nav-icon {
width: 26px;
height: 19px;
margin-top: -8px;
padding:0!important;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #E88425;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 8px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 16px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -2px;
left: 0px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 16px;
left: 0px;
}
Your turn!
I hope this tutorial will help you create a beautiful animated hamburger icon with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
