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

 

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