Skip to content

Instantly share code, notes, and snippets.

@Garconis

Garconis/divi-mobile-submenu-toggles.css

Last active November 14, 2025 11:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Garconis/a3855dbd7bfb7eeaebe1601d11b33979 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Garconis/a3855dbd7bfb7eeaebe1601d11b33979 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Garconis revised this gist Aug 15, 2020. 1 changed file with 57 additions and 19 deletions.
    76 changes: 57 additions & 19 deletions divi-mobile-submenu-toggles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,45 @@
    /* -- HEADER -- */

    /* remove pointer event from menu module mobile wrapper */
    .et_pb_module.et_pb_menu .et_mobile_nav_menu {
    pointer-events: none;
    }

    /* make menu module hamburger icon and menu links interactive again */
    .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_menu_bar,
    .et_pb_module.et_pb_menu .et_mobile_nav_menu .et_mobile_menu li a {
    pointer-events: auto;
    }

    /* when mobile menu is open, change hamburger icon to x icon */
    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
    .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
    }

    /* makes sub sub menu icon be right arrow instead of down arrow */
    /* make desktop sub sub menu icon be right arrow instead of down arrow */
    #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after,
    .et_pb_module.et_pb_menu .et-menu .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
    }

    /* if mobile parent link of child menu is a deadlink, then make it not clickable */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a[href="#0"],
    .et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children > a[href="#0"] {
    pointer-events: none;
    }

    /* - mobile menu toggling elements, injected via jQuery - */

    /* make menu list item be relative, to be able to position toggle within this item */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children,
    .et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children {
    position: relative;
    }
    /* the new toggle element, which is added via jQuery */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(0,0,0,0.03);
    z-index: 1;
    @@ -28,13 +51,16 @@
    right: 4px;
    cursor: pointer;
    text-align: center;
    pointer-events: auto;
    }
    /* the new toggle element when popped */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(0,0,0,0.1);
    }
    /* toggle icon */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    @@ -48,53 +74,65 @@
    content: '\33';
    }
    /* toggle icon when triggered */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
    }
    /* hide sub menus by default */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
    }
    /* show sub menu when triggered via jQuery toggle, and add slight bg color */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu,
    .et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
    background-color: rgba(0,0,0,0.03);
    background-color: rgba(0,0,0,0.03) !important;
    }
    /* remove sub menu list item left padding, since padding will be on anchors */
    #main-header #mobile_menu.et_mobile_menu li li {
    #main-header #mobile_menu.et_mobile_menu li li,
    .et_pb_module.et_pb_menu .et_mobile_menu li li {
    padding-left: 0;
    }

    /* adjust mobile menu anchors side paddings */
    #main-header #mobile_menu.et_mobile_menu li a {
    #main-header #mobile_menu.et_mobile_menu li a,
    .et_pb_module.et_pb_menu .et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
    }
    /* indent sub menu */
    #main-header #mobile_menu.et_mobile_menu li li a {
    #main-header #mobile_menu.et_mobile_menu li li a,
    .et_pb_module.et_pb_menu .et_mobile_menu li li a {
    padding-left: 40px;
    padding-right: 20px;
    }
    /* indent sub sub menus further */
    #main-header #mobile_menu.et_mobile_menu li li li a {
    #main-header #mobile_menu.et_mobile_menu li li li a,
    .et_pb_module.et_pb_menu .et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
    }
    /* if mobile menu anchor has toggle, make room for it to fit next to the link */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a,
    .et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
    padding-right: 44px;
    }

    /* - end mobile menu toggling elements - */

    /* undo Divi's default styling of mobile menu links that have children */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a,
    .et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
    }

    /* make the current page's mobile menu link be different */
    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a,
    .et_pb_module.et_pb_menu .et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
    }
    }

    /* -- END HEADER -- */
  2. Garconis revised this gist Aug 15, 2020. 1 changed file with 14 additions and 12 deletions.
    26 changes: 14 additions & 12 deletions divi-mobile-submenu-toggles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,16 @@
    (function($) {
    function setup_collapsible_submenus() {
    $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
    $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
    $(this).toggleClass("popped");
    });
    }
    $(document).ready(function() {
    setup_collapsible_submenus();
    jQuery( document ).ready( function( $ ) {
    // Create collapsible sub menus in mobile Divi Header Nav
    $( '<div class="sub-menu-toggle"></div>' ).insertBefore( '#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a' );
    // Create collapsible sub menus in mobile Divi Theme Builder Menu
    $( '<div class="sub-menu-toggle"></div>' ).insertBefore( '.et_pb_module.et_pb_menu .et_mobile_menu .menu-item-has-children > a' );
    // Toggle the class to be popped on mobile Divi Header Nav
    $( '#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle' ).click(function () {
    $(this).toggleClass('popped');
    });
    $(window).load(function() {
    setup_collapsible_submenus();
    // Toggle the class to be popped on mobile Divi Theme Builder Menu
    $( '.et_pb_module.et_pb_menu .et_mobile_menu .sub-menu-toggle' ).click(function () {
    $(this).toggleClass('popped');
    });
    })(jQuery);
    // Replace the mobile Divi Theme Builder Menu toggle with different href other than # hash, to prevent scroll to top on sub-menu-toggle clicks
    $( '.et_pb_module.et_pb_menu a.mobile_nav[href="#"]' ).attr( 'href', '#0' )
    } );
  3. Garconis revised this gist Aug 30, 2017. No changes.
  4. Garconis revised this gist Jun 30, 2017. No changes.
  5. Garconis revised this gist Feb 24, 2017. 2 changed files with 15 additions and 23 deletions.
    24 changes: 1 addition & 23 deletions divi-mobile-submenu-toggles.html → divi-mobile-submenu-toggles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,3 @@
    <!-- add styles (without these style tags) to your child theme CSS file -->
    <!-- add script (with these script tags) to Divi Theme Options / Integrations / Body area -->

    <style>
    /* when mobile menu is open, change hamburger icon to x icon */
    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
    @@ -101,22 +97,4 @@
    /* make the current page's mobile menu link be different */
    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
    }
    </style>

    <script>
    (function($) {
    function setup_collapsible_submenus() {
    $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
    $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
    $(this).toggleClass("popped");
    });
    }
    $(document).ready(function() {
    setup_collapsible_submenus();
    });
    $(window).load(function() {
    setup_collapsible_submenus();
    });
    })(jQuery);
    </script>
    }
    14 changes: 14 additions & 0 deletions divi-mobile-submenu-toggles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    (function($) {
    function setup_collapsible_submenus() {
    $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
    $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
    $(this).toggleClass("popped");
    });
    }
    $(document).ready(function() {
    setup_collapsible_submenus();
    });
    $(window).load(function() {
    setup_collapsible_submenus();
    });
    })(jQuery);
  6. Garconis created this gist Feb 24, 2017.
    122 changes: 122 additions & 0 deletions divi-mobile-submenu-toggles.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@
    <!-- add styles (without these style tags) to your child theme CSS file -->
    <!-- add script (with these script tags) to Divi Theme Options / Integrations / Body area -->

    <style>
    /* when mobile menu is open, change hamburger icon to x icon */
    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
    }

    /* makes sub sub menu icon be right arrow instead of down arrow */
    #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
    }

    /* - mobile menu toggling elements, injected via jQuery - */

    /* make menu list item be relative, to be able to position toggle within this item */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
    }
    /* the new toggle element, which is added via jQuery */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(0,0,0,0.03);
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 4px;
    right: 4px;
    cursor: pointer;
    text-align: center;
    }
    /* the new toggle element when popped */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(0,0,0,0.1);
    }
    /* toggle icon */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    }
    /* toggle icon when triggered */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
    }
    /* hide sub menus by default */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
    }
    /* show sub menu when triggered via jQuery toggle, and add slight bg color */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
    background-color: rgba(0,0,0,0.03);
    }
    /* remove sub menu list item left padding, since padding will be on anchors */
    #main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
    }

    /* adjust mobile menu anchors side paddings */
    #main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
    }
    /* indent sub menu */
    #main-header #mobile_menu.et_mobile_menu li li a {
    padding-left: 40px;
    padding-right: 20px;
    }
    /* indent sub sub menus further */
    #main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
    }
    /* if mobile menu anchor has toggle, make room for it to fit next to the link */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
    padding-right: 44px;
    }

    /* - end mobile menu toggling elements - */

    /* undo Divi's default styling of mobile menu links that have children */
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
    }

    /* make the current page's mobile menu link be different */
    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
    }
    </style>

    <script>
    (function($) {
    function setup_collapsible_submenus() {
    $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
    $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
    $(this).toggleClass("popped");
    });
    }
    $(document).ready(function() {
    setup_collapsible_submenus();
    });
    $(window).load(function() {
    setup_collapsible_submenus();
    });
    })(jQuery);
    </script>