How to Create a Mobile Collapsing Nested Menu with Divi’s Theme Builder

A while back, we shared a mobile menu hack that helps you create a collapsing nested menu. We know many of you have used it, but with the new Divi Theme Builder, the approach becomes slightly different. In today’s tutorial, we’ll show you how to apply a mobile collapsing effect to the Menu Module inside the Divi Theme Builder. There are three main parts to this tutorial:

• Setting up your menu and assigning the correct classes to your menu items
• Building your menu using the Theme Builder and Menu Module
• Adding the custom code inside the Theme Builder

You’ll be able to download the template JSON file for free as well! Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Mobile

Desktop

1. Set up Your Menu 

Add Menu Items & Sub Menu Items

The first thing you need to do is create your menu. Add the sub-items of your choice.

Add CSS Class Option

Once you’ve added the menu items, you can enable the CSS classes option by clicking on ‘Screen Options’ and enabling ‘CSS Classes’.

Add CSS Class to First-Level Menu Items Containing Sub Menu Items

Continue by adding a CSS class to the first-level menu items that contain sub-menu items. In this example, that means adding the CSS class to the ‘Service’ and ‘Portfolio’ menu items.

CSS Classes: first-level

Add CSS Class to Second-Level Menu Items & Save Menu

Then, assign a different CSS class to the second-level menu items in your menu. Make sure you add this CSS class to the second-level menu items only (in case you’re adding more levels). Later on this tutorial, we’ll use this CSS class and the one we’ve assigned to the first level menu items to create the collapsing nested menu.

CSS Classes: second-level

2. Go to Divi Theme Builder & Start Building Global Header

Go to Divi Theme Builder

The next part of this tutorial focuses on creating the header design. If you want to make the nested technique apply to a header that you’ve already built (using the Menu Module), you can skip this step and go to the tutorial’s last part. If you want to recreate the design, keep following the steps. Go to the Divi Theme Builder.

Start Building Global Header

Start building your global header next.

Section Settings

Spacing

Inside the template editor, you’ll notice a section. Open that section and remove all default top and bottom padding.

Top Padding: 0px
Bottom Padding: 0px

Download The Global Header Design for FREE

Important: after downloading and uploading the JSON file to your theme builder, you’ll still need to manually set up your menu with the correct CSS classes + add the Code Module with the CSS and JQuery code (step 1 and 3 of this post).

Download Now