How to Change the Divi Mobile Hamburger to a Different Symbol Once Opened

Posted on March 1, 2016

If you’ve ever stared for hours on end at your Divi theme hamburger menu wondering what was slightly askew…I have the answer for you! I also have the number for a good counselor as well as it would seem you need to talk with someone about your obsessive personality. Anyway, one snippet of css magic will do the trick and get that three lined hamburger turning into whatever symbol your heart desires with the click of the mouse or technically the press of a finger because it’s a mobile menu. Possibly the press of a stylus if you’re fancy like that. A quick jaunt into the inspect element panel in Google Chrome will show you the element we need to target. It’s a pseudo element to be exact.

The class that is applied to this span changes once the menu is opened through jQuery so it’s pretty easy to update. When the menu is closed it has a class of ummm closed, which makes sense, and then once clicked it updates to have the class not_closed. Just kidding. It’s updated to opened. Below is the code snippet that you can add to your custom css.

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

Below is a quick video to see what we’re doing in this tutorial:


Leave a Reply

Your email address will not be published. Required fields are marked *

 

Ready to Get Started? Call 203.516.0359