Code by Day | Explore By Weekend

How To Change The Divi Mobile Menu 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. sdfdsfadafdadfa

/*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

74
Last updated Jan 22, 2021 @ 9:47 pm

Please share this post!

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
18 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tim
Tim
8 months 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
7 months 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
7 months ago

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

Entr
Entr
3 months ago

Hi, Thank you so much for this tutorial and all the others.
Is there a way to do this with a button ?
I am not using the divi menu but the divi module Button.
I pasted the hamburger icon in the text of the button and I want it to change to an x when it is open.

Thanks a lot for your help !

Luca
Luca
1 month ago

Hi! Congratulations on your tutorials, really great!
I have a problem with the “X” code that doesn’t match ‘4d’

They have been updated?

Sean Craig
Sean Craig
1 month ago

Thanks for this!
Just a quick note. Your snippet needed a \ for me to make it work. Thought I’d share you so you can update your blog.

Chip
Reply to  Sean Craig
1 month ago

That’s right. I can confirm that.

Last edited 1 month ago by Chip
Henry
Henry
Reply to  Sean Craig
1 month ago

Me, too. Thanks, Sean!

Mike Nelson
Mike Nelson
7 days ago

I posted this question on the YouTube comments area of the same tutorial. So I apologize in advance. So here it is.

I’m trying to change the default square hamburger (61) to a round (63).
Short and sweet!

Mike Nelson
Mike Nelson

I guess the Icon codes have changed. where do I find the current icon codes? Meaning where can I find the code for each icon

Senan
Senan
3 days ago

Hello Nelson, thanks for the tutorial!
Is there anyway to animate the hamburger toggle icon?
Something like this plugin but for the menu module instead of the standard header menu.

Thanks

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart