Creating a mobile collapsing nested menu for Divi

Aug 24, 2020 | Divi Resources

How to create a mobile foldable nested menu for Divi?

More online users these days search for their queries on mobile devices. Hence, it’s essential that your business or profession’s website look & perform well on mobile devices including tablets. And it’s a widely known factor, so everyone creates a responsive or mobile-friendly website.

However, despite their efforts, they inevitably miss one of the crucial aspects of a website’s design appearance, i.e., how their website’s menu looks on the smaller screen devices. And when they miss, their site gets an overwhelming top menu similar to the below screenshot.

Default Divi mobile menu

Well, there’s nothing technically wrong in the above menu, but as more items would take part in it, it will become longer than suggested. Something that would annoy a user, and they would bounce back instead of finding something on your site.

Therefore, in this article, we’re going to take a look at an easy design technique called the mobile foldable nested menu for Divi. It would help us solve this problem and also provide us a nice top menu for mobile devices.

So, without any further due, let’s get started!

Step 1: Create a Menu before everything


Before we start creating our nested mobile menu for a Divi theme website, it’s a must we create a Primary Menu for sure. In case you haven’t, then the below steps can help you create one.

First, go to the WordPress Dashboard, then Appearance, and then choose Menus. If you’ve already created a primary menu, then you can select it. Or, you can create a new one by clicking the create a new menu link.

It will provide you fresh menu interface, where you can input new menu’s name and add items into it.

Step 2: Enable “CSS Classes” option


Once you’ve created your primary menu and added items into it, then to create a mobile foldable nested menu, you have to enable the CSS Classes option.

Click Screen Options, situated below to the WordPress admin bar. It will drag screen options with multiple options.

Screen options in WordPress

From the list of multiple screen options, tick the checkbox CSS Classes, under Show advanced menu properties.

Enable CSS Classes

Step 3: Add the CSS class in the menu’s parent items


As you have enabled the CSS Classes option, now what you have to do is that you add parent-menu-item class in the CSS Classes field of the parent menu items.

But before that, make sure you’ve added parent menu items if you haven’t, then first create them. And after creating your parent menu items, just click the down arrow at the top right corner of the menus item. It will drag more fields, like URL, Navigation Label, and CSS Classes.

And in the CSS Classes field, input the CSS class mentioned above, just like shown in the below screenshot.

Add CSS class to parent menu items containing sub menu items

Step 4: Add the CSS class in the menu’s child items


After adding the CSS class in the parent menu items, we also need to add another CSS class in the parent menu items’ item — child item.

Follow the same step as we did in the parent menu item to add the CSS class, except the Screen Options’ step. Click the down arrow, and insert child-menu-item class in the CSS Classes field.

And you have to do it for every child item.

Add CSS classes to child menu items

Step 5: Add the following CSS in Divi’s Theme Options


We have added CSS class in the menu items. Now, to reflect changes in them, we’re required to add CSS in Divi’s Theme Options.

To do that, on your WordPress Dashboard, go to Divi >> Theme Options.

Divi Theme Options

Then in the General tab, scroll a bit, and in the Custom CSS area, add the below CSS in the same manner.

CSS for nested menu

Step 6: Add the following jQuery to finally achieve nested mobile menu


We’re almost done creating our mobile foldable nested menu for the Divi theme website. However, there’s one more thing that we need to do to achieve our good looking mobile menu. And that is adding jQuery for the same purpose.

For that, you have to go to the Integration tab of the Divi Theme Options.

Divi Theme Options' Integration tab with Enable header code

Once you’re in the Integration tab, activate the Enable header code, and then in the Add code to the < head > of your blog field, add the following jQuery.

After adding the jQuery, make sure you click the button Save Changes.

Divi Theme Options Add code to the head of your blog field with jQuery for nested menu

After all this, your Divi mobile menu would look great


Once, we’re done adding custom CSS and jQuery at the respective locations, our Divi mobile menu is good to go.

Divi foldable mobile menu

We’ve successfully created our mobile foldable nested menu. If it’s working and you find this tutorial useful, then share it with fellow Divi users.

Or, if you’re still unable to create a beautiful looking mobile menu, then let me know in the comments.

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to create custom Divi contact form message pattern

How to create custom Divi contact form message pattern

For an online venture, a contact form works similarly to the visiting card of an offline business. Interested customers contact you whenever they want. And a contact form available on the website does the same. Interested users contact you whenever they want. If...

Divi Marketplace Guide: Plugins, Child Themes & Layouts

Divi Marketplace Guide: Plugins, Child Themes & Layouts

The new Divi Marketplace by the Elegant Themes has taken its share in the web development world. Now, Divi developers around the world can easily share their awesome products to hundreds of thousands of users. A much like independent PlayStore and AppStore for the...