Introduction

The default Divi menu module offers a simple and functional way to navigate on table and mobile device. And also it expanded all the sub-menu by default which is not good practice for use-experience. Many Divi community author provide some custom code to solved the problem. But there is a problem also. You can’t toggle / collapse Divi mobile sub-menu smoothly.

Smooth animations not only improve the aesthetic appeal of a website but also contribute to a more intuitive and engaging interaction for users. Unfortunately, Divi doesn’t provide this feature out of the box, and finding a solution online can be challenging. In this article, I will guide you through two effective methods to achieve a smooth expand & collapse Divi mobile sub-menu

• Custom Code
• Divi Child theme ( Recommended )

Method 1: Custom code to collapse Divi mobile sub-menu

Custom code will be useful if you want to customize or do some adjustment. It gives you full control over the visual and interactive elements of your mobile menu by allowing direct manipulation of the CSS and JavaScript that controls its behavior.

While it involves some basic understanding of CSS and JavaScript. Anything from a simple fade to some complex sliding can be achieved with the custom code method because it is completely customizable. This section is going to involve explaining the process step by step. By the end, you will find absolutely no problem with replicating these changes on your Divi website even if you have little experience with coding.

Add some jQuery code to expand & collapse Divi mobile sub-menu

The provided JavaScript code adds a smooth collapse and expand functionality to the mobile sub-menu in a Divi theme. Here’s what the code does:

1. Wait for the Page to Load:
   • The code begins by ensuring it runs only after the page has fully loaded, using the $(window).on('load', function () { ... }) event handler.
2. Select Menu Items with Sub-Menus:
   • It targets all the menu items in the mobile navigation that have child sub-menus. These menu items are identified by the class .menu-item-has-children > a.
3. Loop Through Each Menu Item:
   • For each menu item with a sub-menu:
     • A new clickable element (<a> with the class mobile_menu_toggler) is created and inserted right after the main menu link. This element will serve as the toggle button for the sub-menu.
     • The script then finds the sub-menu associated with the current menu item.
     • If the sub-menu exists, it creates a new <ol> element with the class dina_sub_menu and moves all the items from the original sub-menu into this new element. The original sub-menu (<ul>) is then replaced with this newly created <ol> element. This restructuring prepares the sub-menu for the smooth animation effect.
     • We replace the original <ul> to <ol> because <ul> it conflict our css code
4. Add Click Event Listeners to the Toggle Buttons:
   • The script selects all the newly added toggle buttons (.mobile_menu_toggler) and attaches a click event listener to each.
   • When a toggle button is clicked, it prevents the default link behavior and:
     • Toggles the menu-open class on the toggle button itself. This class can be used to change the appearance of the button when the sub-menu is open.
     • Finds the associated sub-menu (.dina_sub_menu) and toggles its visibility using a slide effect (slideToggle(300)), which lasts 300 milliseconds. This creates the smooth opening and closing animation for the sub-menu.
     • slideToggle(300) make the animation, whether you can add any jQuery animation function.

Overall, this code enhances the default Divi mobile menu by adding a smooth toggle animation for collapse Divi mobile sub-menu, providing a more dynamic and user-friendly navigation experience.

Where to past the jQuery code

1. Child Theme

If you are already using child theme, past this code into the script.js file. And don’t forget to remove the <script> Tag.

2. Divi Theme Option

Go to Divi > Theme Options > Integration tab and then past the code to Add code to the < head > of your blog code area.

Still if you don’t understand please comment below.

<script>
    (function ($) {
        $(window).on('load', function () {
            // Select menu items with children in the mobile navigation
            const menuItems = $('.mobile_nav .menu-item-has-children > a');

            // Loop through each menu item
            menuItems.each(function () {
                const link = $(this);

                // Create a span element with class 'mobile_menu_toggler'
                const toggler = $(
                    '<a href="#" class="mobile_menu_toggler"></a>'
                );
                // Insert the span element after the link
                link.after(toggler);

                // Select the associated submenu
                const $subMenu = link.nextAll('.sub-menu').first();

                if ($subMenu.length) {
                    // Create a new div with class 'dina_sub_menu'
                    const $newSubMenu = $('<ol>').addClass('dina_sub_menu');

                    // Move children of the submenu to the new div
                    $subMenu.children().appendTo($newSubMenu);

                    // Replace the <ul> with the new <div>
                    $subMenu.replaceWith($newSubMenu);
                }
            });

            // Add click event listener to toggle submenu visibility
            const togglers = $(
                '.mobile_nav .menu-item-has-children > a + .mobile_menu_toggler'
            );

            togglers.each(function () {
                const toggle = $(this);
                toggle.on('click', function (e) {
                    e.preventDefault();
                    // Toggle the class 'menu-open' on the span
                    toggle.toggleClass('menu-open');
                    // Find the associated submenu and toggle the class 'hide' on it
                    const submenu = toggle.next('.dina_sub_menu');
                    if (submenu.length) {
                        submenu.slideToggle(300);
                    }
                });
            });
        });
    })(jQuery);
</script>

Add some CSS code to expand & collapse Divi mobile sub-menu

The next step is to add the CSS code. This CSS code and jQuery code together create expand and collapse Divi mobile sub-menu effect smoothly

Where to past the CSS code

1. Child Theme

If you are already using child theme, past this code into the style.css file.

2. Divi Theme Option

Go to Divi > Theme Options > Custom CSS tab and then past the code

Still if you don’t understand please comment below.

#page-container .mobile_nav .dina_sub_menu {
    display: none;
}

#page-container .mobile_nav .dina_sub_menu li {
    list-style: none !important;
}

#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}

#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}

/* Change the position of the toggler button */
#page-container .mobile_nav .mobile_menu_toggler {
    position: absolute;
    text-align: center;
    border: none !important;
    width: 44px;
    height: 46px;
    padding: 0 !important;
    top: 0px;
    right: 0;
    opacity: 1 !important;
    z-index: 999;
}

/* Customize close toggler icon*/
#page-container .mobile_nav .mobile_menu_toggler::after {
    position: relative;
    content: '\33';
    top: 12px;
    right: 0;
    font-family: 'ETmodules';
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    background: hsl(
        160.71deg 84% 39.22% / 13%
    ) !important; /* Change toggler background color */
    color: #10b882 !important; /* Change toggler icon color */
    padding: 3px;
    border-radius: 50px;
    transform-origin: center;
    transition: all 0.4s ease !important;
}
/* Customize open toggler icon */
#page-container .mobile_nav .mobile_menu_toggler.menu-open::after {
    background: hsl(160.71deg 84% 39.22% / 33%) !important;
    content: '\32';
}

If you know basic CSS and JavaScript then you will see we have comment out in the code, so that you can adjust as per you need.

Ready to take your Divi website to the next level?

Discover the power of our ultimate Divi module extension DiviNationKit plugin. Download it for free today and unlock a world of creative possibilities for your WordPress site!

Learn More

Method 2: Install our child theme (simple)

The Divi Child Theme approach is a robust and efficient way to customize your Divi website while ensuring that your changes are safe from theme updates.

By implementing the smooth collapse and expand animation for your mobile sub-menu through a child theme, you create a solution that is both scalable and maintainable.

This method is not only preserves your customizations but also keeps your code organized and isolated, making it easier to manage and modify as needed.

How Easy is This Process?

Setting up a Divi Child Theme for adding smooth animations to collapse Divi mobile sub-menu is a straightforward process, even if you’re not deeply familiar with coding.

With just a few steps, you can achieve a polished and professional look for your mobile navigation, enhancing the user experience without the worry of losing your customizations during future updates.

Full Process: Downloading, Installing, and Activating the Divi Child Theme

Step 1: Download a Pre-Made Divi Child Theme

Step 2: Install and activate child theme

Method 1: Install from the WordPress Dashboard

1. Log into WordPress:
   • Go to your WordPress dashboard and log in with your credentials.
2. Navigate to the Themes Section:
   • In the dashboard, go to Appearance > Themes.
3. Upload the Child Theme:
   • Click on Add New and then Upload Theme.
   • Choose the divi-child.zip file from your computer and click Install Now.
4. Activate the Child Theme:
   • Once the theme is installed, click Activate to apply the child theme to your site.

Method 2: Install Using FTP

1. Connect to Your Server:
   • Open your FTP client (like FileZilla) and connect to your server using your FTP credentials.
2. Navigate to the WordPress Themes Directory:
   • Go to the wp-content/themes/ directory on your server.
3. Upload the Child Theme Folder:
   • Unzip the divi-child.zip file on your computer.
   • Upload the entire divi-child folder to the themes directory on your server.
4. Activate the Child Theme:
   • Log into your WordPress dashboard.
   • Go to Appearance > Themes, find the Divi Child Theme you just uploaded, and click Activate.

Conclusion

By installing and activating your Divi Child Theme, you’ve laid the foundation for a more customizable and future-proof website. Whether you chose to install via the WordPress dashboard, FTP, or cPanel, this process ensures that your unique design and functionality enhancements are safely preserved, even when the Divi parent theme updates. Now, you can confidently proceed with adding custom features like smooth sub-menu animations, knowing your changes are secure and manageable.

I hove you enjoyed if so, please share your thought in the comments below. If you find this article helpful Please share it with your friends

Happy Learning 🙂