1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved Collapse submenu items in the mobile menu

Discussion in 'Get Help On Divi Wordpress' started by Jointly, Nov 1, 2019.

  1. Jointly

    Jointly New Member

    Hi,

    Does somebody have a codesnippet for collapsing submenu items in mobile menu? I used to do this in Divi Switch but since Divi 4.0 the option doesn't work anymore.
     
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

  3. Jointly

    Jointly New Member

    Doesn't work anymore. I made the mobile menu with the new Theme Builder.
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    I modified the collapsible mobile menu code to work with the menu built with Divi Theme Builder.

    Try to paste the code below in WP Admin > Divi > Theme Options > Integrations > Add code to the body
    Code:
    <style type="text/css">
    header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
    header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
    header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
    header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
    header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
    header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
    </style>
    
    <script type="text/javascript">
    (function($) {
        
        function setup_collapsible_submenus() {
            var $menu = $('header .et_mobile_menu'),
                top_level_link = 'header .et_mobile_menu .menu-item-has-children > a';
                
            $menu.find('a').each(function() {
                $(this).off('click');
                
                if ( $(this).is(top_level_link) ) {
                    $(this).attr('href', '#');
                }
                
                if ( ! $(this).siblings('.sub-menu').length ) {
                    $(this).on('click', function(event) {
                        $(this).parents('.mobile_nav').trigger('click');
                    });
                } else {
                    $(this).on('click', function(event) {
                        event.preventDefault();
                        $(this).parent().toggleClass('visible');
                    });
                }
            });
        }
        
        $(window).load(function() {
            setTimeout(function() {
                setup_collapsible_submenus();
            }, 700);
        });
    })(jQuery);
    </script>
     
  5. Jointly

    Jointly New Member

    You are a champ my friend!
     
  6. jey

    jey New Member
    Divi Ultimate Child Theme

    Doesn`t Work on DIVI 4
     
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    The code above is used for Divi Theme Builder custom header.
     
    dalepothen likes this.
  8. dalepothen

    dalepothen New Member

    i used that code in but i have small issue
    Admission + this has clickable open and close
    Admission welcome also has it but i need to add same icon to it and also animation to slide up when it is closed

    can you have a look in the site https://ldmschool.com i need in mobile menu only
    thanks
     
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    header .et_mobile_menu .menu-item-has-children>a:after {
        display: block!important;
    }
    I don't think you can do that.
     
    dalepothen likes this.
  10. dalepothen

    dalepothen New Member

    thanks a ton it worked
    one more request in desktop when hovering over menu can you add a line with hover color with animation
    like in this site https://almostinevitable.com
     
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    dalepothen likes this.
  12. dalepothen

    dalepothen New Member

    ok i will look at it anyway to delay animation of menu its goes of fast of megamenu as so as its out of menu it closes fast
     
  13. brandyarnett

    brandyarnett New Member

    When I use this script, it functions well with the theme builder custom menu except for one glitch. The parent menu item will not link to it's page when clicked. Is there a way for the icon to expand the nest, but clicking on the actual name goes to the parent page?
     
  14. Divi.Help

    Divi.Help Administrator
    Staff Member