Easily Transform Divi’s Mobile Menu to an “X” With One Line of Code

Jul 13, 2016

One of my complaints with Divi involves the mobile menu, or hamburger menu, and how it has to be closed. When a user taps on the three lines, which obviously brings up the menu, the only way to close it is to tap the three lines again. While showing one of my sites to my wife, I noticed that she tried to close the menu by just tapping an area outside of the menu. So, I posted a question in the support forum to see if it would be possible to close the menu by just clicking off of it. Unfortunately, it wouldn’t be easy to implement this feature. So, I took to Google and found a way to let the user know how to close the menu. By using the code below, you can transform the three lines into an “X” after a user opens the menu.

All you have to do is copy/paste the following code into the Custom CSS section within the Divi Theme Options or your child theme.

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

Pin It on Pinterest