Toggle Divi Submenu Before and After

Hmmm…which one looks cleaner and easier to use to you?

As you can tell, I use the Divi WordPress theme quite a bit for projects.  It’s next-gen builder offers lots of functionality out of the box and requires very little css tinkering to make it look good.  One aspect of the Divi builder that I don’t like is the mobile menu system.  Specifically when it comes to sub-menu structure.  Out of the box it works fine if you don’t have any subpages.  If you do…let’s hope you don’t have a lot because your mobile menu will look like an abridged version of War and Peace.  Seriously, I’ve built some sites, usually WooCommerce stores, that have tons of subpages.  The mobile menu can stretch the length of the page infinitely.

The solution seems simple enough with some jQuery although Elegant Themes has not addressed the issue yet in any of their updates.  If you are looking for a solution, you’ll be glad you dropped by the site!  Essentially what we need to do is add a css class that will initially hide all sub-menus with the class .sub-menu and then apply a new class that will show the sub-menu once the top-level anchor link is clicked.  Let’s look at an example from my very own site as I finally got around to this update on my own site.  Partly because my nav menu is not that deep but also because I’ve been pretty busy and it wasn’t really a priority because, well…I don’t get paid to update my own site.

Okay…so where does this go? Yeah, that’s kind of important. The javascript needs to be placed in the “Theme Options” panel for Divi in the integration section. Find the space labeled “ADD CODE TO THE < BODY > (GOOD FOR TRACKING CODES SUCH AS GOOGLE ANALYTICS)” and paste it in there. Make sure you save. This will make sure that this code loads on every page. As far as the css styles…those should go in your child theme style.css file.

That’s it for this tutorial. I hope this helps you to clean up your Divi Theme mobile menu. I’m sure they will address this issue in one of the next few updates as it’s pretty important and can significantly impact the user experience.

Go get ’em kid!