Welcome back to another blog post in which I am going to show how to style Divi hamburger menu in an easy way.

Before I start, have a look at what we are going to achieve.

Looks pretty good right? Now let’s start the magic.

Must Read: Learn how to style Divi checkout page.

1. How To Style Divi Hamburger Menu

Copy the CSS below and paste it in the child theme or you can paste it to Divi > Theme Options > Custom CSS.

/* Styling Middle Line - Code By Divi Awesome */
.mobile_menu_bar{
	width:35px;
	height:3px;
	background:#000; /* Change the color if you are using black background */
	border-radius:20px;
	transition: all .5s ease-in-out;
}

/* Styling Top and Bottom Line - Code By Divi Awesome */
.mobile_menu_bar:before,
.mobile_menu_bar:after{
	content:'';
	height:3px;
	position:absolute;
	background:#000; /* Change the color if you are using black background */
	border-radius:20px;
	transition: all .5s ease-in-out;
}

/* Reducing width of Top Line - Code By Divi Awesome */
.mobile_menu_bar:before{
	width:30px;
	transform:translatey(-8px);
	transition: all .5s ease-in-out;
}

/* Reducing width of Bottom Line - Code By Divi Awesome */
.mobile_menu_bar:after{
	width:25px;
	transform:translatey(8px);
	transition: all .5s ease-in-out;

}

/* Sliding Middle line to the left - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar{
	transform:translatex(-50px);
	background:transparent;
	transition: all .5s ease-in-out;
}

/* Rotating the line once it is open - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar:before{
	transform:rotate(45deg) translate(35px, -35px);
	transition: all .5s ease-in-out;
}

/* Rotating the line once it is open - Code By Divi Awesome */
.mobile_nav.opened .mobile_menu_bar:after{
	transform:rotate(-45deg) translate(35px, 35px);
	transition: all .5s ease-in-out;
	width:30px;
}

/*If dropdown is overlapping hamburger use the below code*/

ul#mobile_menu2 {
    top: 30px;
}

 Youtube channel 

2. To make this possible we need some javascript.

Magic is not possible without javascript so let’s add some javascript and enjoy the movie.

Copy the javascript and paste it into Divi > Theme Options > Integration and paste it in Head.

<script>
	const menuBtn = document.querySelector('.mobile_menu_bar');
	let menuOpen = false;
	menuBtn.addEventListener('click',()=>{
		if(!menuOpen){
			menuBtn.classList.add('opened');
			menuOpen = true;
		}else{
			menuBtn.classList.remove('opened');
			menuOpen = false;
		}
	});
</script>

Bored? 🥱

Hit the subscribe if you love how to style Divi hamburger Menu post. See you in the next.