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.
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!