
Divi – Mobile menu – X – on open
Learn to change the Divi mobile menu icon open-state with this simple CSS snippet.
This is probably the simplest tutorial/snippet I’ve published on this website.
It’s also one of the most obvious, and I’m surprised I haven’t noticed this before, but yeah, look:
The default Divi mobile menu hamburger stays hamburger even when the menu is opened.
This snippet changes it to an X.
The code
#main-header .mobile_nav.opened .mobile_menu_bar:before { content: "\4d"; }
To add custom CSS, either..
- Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
- Add it to the Custom CSS field in Divi > Theme Options > General or..
- Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
- You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)
So simple.
more?
For more simple stuff with the hamburger,
Change the size (note: it’s normally 32px, so this example is a bit large, change it to what you want)
#main-header .mobile_menu_bar:before { font-size: 45px; }
Change the color:
#main-header .mobile_menu_bar:before { color: red; }
Here’s how to change the normal hamburger altogether
Also you might want to check out
more header resources

Photo by David Paschke on Unsplash
Super simple but much needed. Thank you!
Thank you for the kind words. Happy to help.