How To Change The Divi Menu Module Hamburger Menu Icon To Close X Icon

Changing the Divi Menu Module’s hamburger menu icon to an “X” when it’s open involves some CSS magic. Here’s how you can do it:

Step 1: Add Custom CSS

Now add the following CSS code to Divi > Theme Options > Custom CSS or directly into your child theme’s stylesheet.

.mobile_nav.opened .mobile_menu_bar:before {content: 'd';}
.mobile_menu_bar:before {transition: all .4s ease;transform: rotate(0deg);display: block;}
.mobile_nav.opened .mobile_menu_bar::before {transition: all .4s ease;transform: rotate(90deg);display: block;}

That’s it! Your hamburger icon should now change to an “X” when the menu is open. Hope that helps you out! Let me know if you have any more questions.

Cheers!