-
-
Save Garconis/a3855dbd7bfb7eeaebe1601d11b33979 to your computer and use it in GitHub Desktop.
Neither this solution nor https://intercom.help/elegantthemes/en/articles/3725736-how-to-create-a-collapsable-mobile-menu-while-keeping-the-parent-links-active works in the latest version of Chrome for Mac. The +/x icons either make the entire menu collapse when clicked or they don't appear at all.
For the Javascript to work you have to enclose it inside $(document).ready(function () { /* all calls here */ });
, because the "ul.et_mobile_menu" element is only appended to the page (by JavaScript/jQuery) after it loads (if you use the Chrome to view the page source you don't see any "ul.et_mobile_menu" element). You could also use setTimeout.
I also removed the "et_pb_menu" class reference from the CSS and JavaScript, because the Divi Theme Builder doesn't use it.
jQuery( document ).ready( function( $ ) {
$(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_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');
});
// Toggle the class to be popped on mobile Divi Theme Builder Menu
$( '.et_pb_module .et_mobile_menu .sub-menu-toggle' ).click(function () {
$(this).toggleClass('popped');
});
// 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 a.mobile_nav[href="#"]' ).attr( 'href', '#0' );
});
} );
Thanks for sharing your code @Garconis. I fully agree, this should be standard in a payed theme nowadays, I fail to understand why they didnt build this in right away. Anyways youve got us covered. Thanks!
I also removed this CSS code. It was not allowing the menu to scroll if it was too tall and the header was fixed:
/* 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;
}
Oh wow @Garconis, thank you so much for this code.
This is finally the solution that works like I intended. Great job!
I've only got one last questions I couldn't solve so far:
Imagine I'm on a subsite an now open the menu again. Is it possible to open the menu with the active section already opened, so users can see where they currently are?
Thank you so much in advance.