1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Collapse submenu items in the mobile menu

Discussion in 'Free Divi Community Forum' started by Jointly, Nov 1, 2019.

Page 1 of 3
  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.
     
    #1 Jointly, Nov 1, 2019
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    #2 Divi.Help, Nov 1, 2019
  3. Jointly

    Jointly New Member

    Doesn't work anymore. I made the mobile menu with the new Theme Builder.
     
    #3 Jointly, Nov 1, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  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>
     
    #4 Divi.Help, Nov 1, 2019
  5. Jointly

    Jointly New Member

    You are a champ my friend!
     
    #5 Jointly, Nov 1, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  6. jey

    jey New Member

    Doesn`t Work on DIVI 4
     
    #6 jey, Nov 12, 2019
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    The code above is used for Divi Theme Builder custom header.
     
    #7 Divi.Help, Nov 12, 2019
    dalepothen likes this.
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  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
     
    #8 dalepothen, Nov 23, 2019
  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.
     
    #9 Divi.Help, Nov 23, 2019
    dalepothen likes this.
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  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
     
    #10 dalepothen, Nov 23, 2019
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    #11 Divi.Help, Nov 24, 2019
    dalepothen likes this.
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  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
     
    #12 dalepothen, Nov 24, 2019
  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?
     
    #13 brandyarnett, Jan 14, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  14. Divi.Help

    Divi.Help Administrator
    Staff Member

    #14 Divi.Help, Jan 14, 2020
  15. conekt

    conekt New Member

    Hi!
    This works well.. can you change the code so that it works for theme builder and the normal divi menü? In normal Divi menu (+) signs are shown, but doesnt work.
    I use the normal header and a theme builder header on another page to get different menus on different pages.

    Regards Eric
     
    #15 conekt, Jan 23, 2020
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  16. conekt

    conekt New Member


    Or so that it only works for Theme Builder Header, not for the normal header. Problem is, that the + signs aure shown in the normal header without function. So I cant use another code for standard header because the +signs were also shown in standard header design.
     
    #16 conekt, Jan 24, 2020
  17. Sandra

    Sandra New Member

    Ahh this worked like a charm, thank you so much! That being said, I have another level of navigation that also needs a toggle, any idea how to make that work?
     
    #17 Sandra, Jan 24, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade gradient text design for your Divi site without using any plugins:View Demo
  18. Sandra

    Sandra New Member

    Ahh I also need the navigation items with the toggle to be clickable
     
    #18 Sandra, Jan 24, 2020
  19. Divi.Help

    Divi.Help Administrator
    Staff Member

    What about the below code:
    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'; }
#page-container header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#page-container 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>
     
    #19 Divi.Help, Jan 26, 2020
    Chad Williams likes this.
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  20. Divi.Help

    Divi.Help Administrator
    Staff Member

    #20 Divi.Help, Jan 26, 2020
(You must log in or sign up to post here.)
Page 1 of 3