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.

So let’s dive into this thing. The first thing we have to do is apply the new classes that we want to use for the css. The tricky part is that it has to happen dynamically when the page loads and also requires an event handler. So jQuery it is! Check out the code below to see what we are doing:

Let’s break it down.

$('#mobile_menu > .menu-item-has-children > a').attr('href', '#');

This code will dynamically add the ‘#’ symbol as the href attribute for all links that have children. This is necessary so that we can use those links to expand the submenus and not actually link to another page. This is something that can easily be done within Divi as well in the “Theme Options” panel under Navigation and then General Settings.

$('#mobile_menu > .menu-item-has-children > a').each(function() {
$(this).next('.sub-menu').addClass('hide');
});

This will find each menu item that has children and then find the sub-menu class after the link that has a # for it’s href. It will then apply the class .hide which we will use in a bit.

$('#mobile_menu > .menu-item-has-children > a').click(function(event) {
event.preventDefault();
$(this).next('.sub-menu').toggleClass('visible');
});

Finally, this piece of code will add the .visible class back to that sub-menu when the parent link is clicked.

Okay…so that’s it for the jQuery. Oh wait…where does this go? Yeah, that’s kind of important. This 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.

Now onto the css. We need to use those new classes that we just setup in the script above. Take a look at the code below and add it to your custom css code for your theme.

As you can see we use the .hide and .visible class to hide and show our submenu menu. The other code is used to generate a nice css styled arrow to let the user know that there are more menu pages on click.

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!