Improve The Divi Menu With An X Icon When Opened
A Quick And Easy UX Improvement
We all want to give our website users a good experience, and part of that is adding finishing touches that go beyond the standard offering built into Divi. This quick tutorial and code snippet will dramatically improve user experience as they navigate your Divi website either on tablet or on phone, or even on desktop if you are following one of our menu tutorials on adding the hamburger menu on desktop. Either way, learning how to change the Divi Menu hamburger icon into an X when opened will make a lot of sense to the user.
▶️ Please watch the video above to get all the exciting details! 👆
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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
EDIT: In the comments, Shawn asked about how to animate this. Unfortunately it’s not possible to “animate” the icons by morphing their sizes, as these are solid icons, not vectors. So one trick that Jimmy suggests is to add a nice rotation effect. Here is the code, it looks pretty nice!
/*rotate the Divi Menu icon on click*/
.mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
transition: all .4s ease;
transform: rotate(90deg);
display: block;
}
Hi Nelson,
Thank you for your great tutorials. You have helped me a lot on many websites.
I have a small problem with the display:
I’m currently working on a website with several subpages. I changed the hamburger icon to X. On some subpages, the X is displayed correctly when the menu is open. On other subpages not only the X but also the old symbol is displayed. Thus, both symbols are superimposed.
Do you have any idea?
Thank you and best regards
Julian
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.
Me, too. Thanks, Sean!
Fixed, Divi always strips them out, a know bug in Divi for as long as I can remember unfortunately.
That’s right. I can confirm that.