Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

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.



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



To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi



    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

    You will also get a 10% discount coupon in your inbox as soon as you sign up!


    Photo by David Paschke on Unsplash

    Default image

    Hi, I'm a front-end WordPress developer, and UI/UX designer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to work with me come check out my web development agency.

    Articles: 79


    Leave a Reply

    Your email address will not be published.