How To Change The Divi Menu Module Hamburger Icon To An X When Open Tutorial by Pee-Aye Creative

How To Change The Divi Menu Module Hamburger Icon To An X When Open

This quick CSS code snippet and tutorial will change the Divi Menu Module hamburger icon into an X when the mobile menu is open.

Changing The Divi Menu Module  Icon To An X

This is going to be a short tutorial, but we all love quick and easy, right? Changing the Divi Menu Module hamburger icon into an X is a simple process. By default, the icon is part of a built-in icon font called ETmodules that comes with Divi. The default icon code for the hamburger menu is 61, and we are changing that to the X when the menu is opened, which has an icon code of 4d. So once you press the hamburger menu icon to open the menu, the icon gets replaced and it provides a better user experience.

As usual, copy and paste the following little snippet into the Divi>Theme Options>Custom CSS box.

/*change Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

That was about as easy as they come! Just one tiny snippet and the Divi Menu Module now has an X as the open icon!

Closed

Open

17

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Other Code Snippets

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tim
Tim
1 month ago

This is great, is there a similarly simpler way to adjust the time it switches to an X?
Your tutorials are excellent!

mara
mara
1 month ago

Hello Nelson! Thank you for the tutorial. I have some issue trying to change the color of the hamburger icon and the X. The default color is blue and I’m trying to make it black. Can you help me? Thank you in advance and for all the great content !

Bryan
Bryan
26 days ago

Is there an easy way to add a transition to both?

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart