Divi – Mobile menu – X – on open

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";
}

• 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

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

Photo by David Paschke on Unsplash