Home

Divi Theme mobile menu, collapsing submenu navigation

This adds + open and close buttons to the mobile navigation menu.

CSS

#main-header .et_mobile_menu li{ position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > .after { 
    text-align: center; speak: none; text-transform: none; 
    position: absolute; top: .6rem; right: 0;
    font-size: 16px; color: white; font-weight: bold;
    display: block; width: 1.5rem;
}
#main-header .et_mobile_menu ul.sub-menu 
{
display: none !important; visibility: hidden !important; 
}
#main-header .et_mobile_menu .visible > ul.sub-menu { 
display: block !important; visibility: visible !important; 
}

Javascript

(function($) {

    // Set navigation submenu open button
    function setup_collapsible_submenus() {
        var menu = $('#mobile_menu');
        menu.find('a').each(function() {
            if ($(this).siblings('.sub-menu').length ) {
              $(this).before("
<div class='after'>+</div>

");
            }
        });
        menu.find('.after').each(function() {
            $(this).on('click', function(event) {
                event.preventDefault();
                $(this).parent().toggleClass('visible');
            });
        });

    }

    // Run setup when navigation is in page
    var myVar = setInterval(myTimer, 100),
        loopMax = 20;
    function myTimer() {
        // Find menu
        if($("#mobile_menu").length > 0){
            setup_collapsible_submenus();
            clearInterval(myVar);
        }
        // Play safe
        if(loopMax <= 0){
            clearInterval(myVar);
        }
        loopMax -= 1;
    }
    
})(jQuery);

Leave a Reply

Your email address will not be published.