In this tutorial, I’ll share my experience of implementing a clickable mobile menu toggle in Divi. Initially, I used CSS code from Pee Aye Creative to change the Divi hamburger menu icon to an “X” when open, following this guide: How To Change The Divi Menu Module Hamburger Icon To An X When Open. While this successfully changed the hamburger icon, I needed additional functionality: clickable parent menu items that reveal submenus and nested submenu items.

Here’s a detailed guide on how to fix and debug the issue step by step.

Step 1: Identify the Problem

The main issues you might face after implementing the Pee Aye Creative CSS include:

• Parent menu items not clickable (only the “X” icon toggles visibility).
• JavaScript selector mismatches.
• Divi’s built-in scripts conflicting with custom JavaScript.
• CSS visibility or specificity issues.

Step 2: Debugging with Temporary JavaScript & CSS

To pinpoint the exact issue, temporarily use the following JavaScript and CSS snippets:

Temporary JavaScript (for debugging):

<script>
jQuery(document).ready(function($) {
    setTimeout(function(){
        var menuItems = $("ul.et_mobile_menu li.menu-item-has-children");
        console.log("Debug: menu items found:", menuItems.length);

        menuItems.each(function(){
            $(this).css('border', '2px solid red'); // visual debugging
            if ($(this).children('.mobile-toggle').length === 0) {
                $(this).append('<a href="#" class="mobile-toggle">Toggle</a>');
            }
        });
    }, 1000); // ensure Divi menu loads first
});
</script>

Temporary CSS (for debugging visibility clearly):

ul.et_mobile_menu li.menu-item-has-children ul.sub-menu {
    display: block !important;
    background: #ccc;
}

.mobile-toggle {
    background: yellow !important;
    display: block !important;
    position: absolute !important;
    top: 0;
    right: 0;
    padding: 5px;
    z-index: 9999;
}

Check your browser’s console (F12) for:

Debug: menu items found: X

Ensure red borders, yellow toggle buttons, and gray backgrounds for submenus appear.

Step 3: Implementing the Final, Working Solution

Final JavaScript Solution:

<script>
jQuery(document).ready(function($){
    setTimeout(function(){
        var $menuItems = $("ul.et_mobile_menu li.menu-item-has-children");

        $menuItems.each(function(){
            if ($(this).find('> .mobile-toggle').length === 0) {
                $('<a href="#" class="mobile-toggle"></a>').insertAfter($(this).children('a').first());
            }
        });

        $("ul.et_mobile_menu").off('click', '.mobile-toggle').on('click', '.mobile-toggle', function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).parent().toggleClass('dt-open').children('.sub-menu').first().slideToggle(200);
        });
    }, 1200); 
});
</script>

Final CSS Solution (for production use):

ul.et_mobile_menu li.menu-item-has-children {
    position: relative !important;
}

.mobile-toggle {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    z-index: 9999 !important;
    cursor: pointer;
}

.mobile-toggle::after {
    font-family: "ETModules";
    content: '\33';
    font-size: 24px;
    color: #333;
    background: #f0f3f6;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dt-open > .mobile-toggle::after {
    content: '\32';
}

ul.et_mobile_menu li.menu-item-has-children ul.sub-menu {
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

Step 4: Verify the Final Solution

• Clear all caches.
• Refresh and thoroughly test the page.

Now you should have:

• An “X” toggle for the mobile hamburger icon (courtesy of Pee Aye Creative).
• Clickable menu items that smoothly reveal submenus and nested submenu items.
• Proper functionality with no JavaScript or CSS errors.