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

December 11, 2019

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.


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


how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder Theme Builder Layout


how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder Theme Builder Layout

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

To lay your hands on the free collapsing nested menu, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder Theme Builder Layout

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

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-1 Theme Builder Layout

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

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-2 Theme Builder Layout

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

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-3 Theme Builder Layout

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.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-4 Theme Builder Layout

Start Building Global Header

Start building your global header next.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-5 Theme Builder Layout

Section Settings


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

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-6 Theme Builder Layout

Z Index

Increase the section’s z index as well.

  • Z Index: 99999

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-7 Theme Builder Layout

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-8 Theme Builder Layout


Without adding any modules yet, open the row settings and allow the row to take up the screen’s entire width.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-9 Theme Builder Layout


Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-10 Theme Builder Layout

Main Element

Make sure all modules appear next to each other on smaller screen sizes by adding one single line of CSS code to the row’s main element too.

display: flex;

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-11 Theme Builder Layout

Column 1


Then, open the column 1 settings and add some custom top and bottom padding.

  • Top Padding: 20px
  • Bottom Padding: 20px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-12 Theme Builder Layout


Add some border radius too.

  • Top Right: 100px
  • Bottom Right: 100px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-13 Theme Builder Layout

Box Shadow

And complete the column 1 settings by adding a subtle box shadow.

  • Box Shadow Horizontal Position: 20px
  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.15)

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-14 Theme Builder Layout

Column 2


Open the second column’s settings next and add some top and bottom padding.

  • Top Padding: 20px
  • Bottom Padding: 20px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-15 Theme Builder Layout

Column 3

Gradient Background

On to the next and last column. Add a gradient background.

  • Color 1: #26c699
  • Color 2: #abe02f
  • Gradient Direction: 116deg

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-16 Theme Builder Layout


Add some custom top and bottom padding next.

  • Top Padding: 20px
  • Bottom Padding: 20px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-17 Theme Builder Layout


Then, go to the border settings and make the following changes:

  • Top Left: 100px
  • Bottom Left: 100px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-18 Theme Builder Layout

Box Shadow

Complete the column settings by adding a box shadow.

  • Box Shadow Horizontal Position: -26px
  • Box Shadow Vertical Position: 0px
  • Shadow Color: #d2ff0c

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-19 Theme Builder Layout

Add Image Module to Column 1

Upload Logo

Time to add modules, starting with an Image Module in column 1. Upload your logo.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-20 Theme Builder Layout


Change the module’s image alignment next.

  • Image Alignment: Center

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-21 Theme Builder Layout


Complete the module’s settings by changing the width across different screen sizes.

  • Width: 120px (Desktop), 80px (Tablet & Phone)

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-22 Theme Builder Layout

Add Menu Module to Column 2

Select Menu

In column 2, the only module we need is a Menu Module. Select the menu you’ve created in the first part of this tutorial.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-23 Theme Builder Layout

Remove Background Color

Remove the module’s background color next.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-24 Theme Builder Layout


Then, change the layout settings.

  • Style: Centered
  • Dropdown Menu Direction: Downwards

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-25 Theme Builder Layout

Menu Text

Style the menu text as well.

  • Menu Font: Montserrat
  • Menu Font Weight: Medium
  • Menu Text Color: #000000
  • Menu Text Size: 13px
  • Menu Letter Spacing: 1px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-26 Theme Builder Layout

Dropdown Menu

Continue by changing some colors in the dropdown menu settings.

  • Dropdown Menu Background Color: #ffffff
  • Dropdown Menu Line Color: #000000

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-27 Theme Builder Layout


And complete the module’s settings by changing the hamburger menu icon color in the icons settings.

  • Hamburger Menu Icon Color: #000000

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-28 Theme Builder Layout

Add Text Module to Column 3

Add Content

On to the next and last module, which is a Text Module in column 3. Add some copy of your choice.

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-29 Theme Builder Layout

Add Link

Add a link to the module next.

  • Module Link URL: #

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-30 Theme Builder Layout

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Montserrat
  • Text Font Weight: Semi Bold
  • Text Color: #ffffff
  • Text Size: 16px
  • Text Line Height: 1em
  • Text Alignment: Center

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-31 Theme Builder Layout


Complete the module’s settings by adding some topmargin.

  • Top Margin: 10px

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-32 Theme Builder Layout

3. Add Functionality to Menu Using a Code Module

Add Code Module to Column 2

Once you’ve completed the design of your header, it’s time to add the custom code that’ll transform the mobile menu into a collapsing nested menu. Add a Code Module to the second column (or anywhere else).

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-33 Theme Builder Layout

Insert CSS & JQuery Code

Then, add the CSS and JQuery code. Make sure you place the CSS code between style tags and the JQuery code between script tags.

.et_mobile_menu .first-level > a { background-color: transparent; position: relative; } .et_mobile_menu .first-level > a:after { font-family: 'ETmodules'; content: '\4c'; font-weight: normal; position: absolute; font-size: 16px; top: 13px; right: 10px; } .et_mobile_menu .first-level > .icon-switch:after{ content: '\4d'; } .second-level { display: none; } .reveal-items { display: block; } .et_mobile_menu { margin-top: 20px; width: 230%; margin-left: -65%; }
(function($) { function setup_collapsible_submenus() { var FirstLevel = $('.et_mobile_menu .first-level > a');'click').click(function() { $(this).attr('href', '#'); $(this).parent().children().children().toggleClass('reveal-items'); $(this).toggleClass('icon-switch'); }); } $(window).load(function() { setTimeout(function() { setup_collapsible_submenus(); }, 700); }); })(jQuery);

how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder-34 Theme Builder Layout


Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.


how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder Theme Builder Layout


how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder Theme Builder Layout

Final Thoughts

In this post, we showed you how to make a collapsing nested menu apply to your global header inside the Theme Builder. We started by creating the primary menu bar, continued by designing our header inside the Theme Builder using the Menu Module and completed the tutorial by adding the custom code that makes the effect work. We hope you’ve enjoyed this tutorial and if you have any questions, feel free to leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

designcap-overview-and-review Theme Builder Layout

DesignCap Overview and Review

DesignCap is an online app that makes it easy to create high-quality graphic designs without needing advanced graphic design skills. The features are customizable and it includes lots of templates, photos, and illustrations for your projects. Save your designs in the...

fixed-headers-floating-elements-draggable-anchors-and-more Theme Builder Layout

Fixed Headers, Floating Elements, Draggable Anchors And More!

Introducing The Divi Theme Builder Posted on October 17, 2019 by Nick Roach in Theme Releases The Divi Builder Unleashed Divi Is No Longer Just A Page Builder. Enjoy Complete Control Over Your Entire Website With The Theme Builder. Today is a day that many of you have...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.