This is great! I'm assuming there's no easy way to make the parent-items clickable as well? Ubermenu does ths, but I've noticed many menus seem to not allow top-level navigation items to be pages as well (making the toggle and text perform different actions).
@rezl , did you try this out? The parent menu items are clickable. That's one of the main reason I created this, instead of using other options I've stumbled upon.
great! thx, dude!
This is awesome. Worked perfectly. Huge improvement over default Divi mobile menu. Three years after you shared this, how has ET not made this standard?
I Dont know how to thank you man.
Perfectly working thanks again.
the code in divi documentation is useless
Awesome Job
Thank-you. It was annoyances like this that made me ditch DIVI but still have old sites that need updates and this was a welcome find.
Hi code works great although I have quite a lot of sub menus is it possible to have them closed as currently each main menu item and its sub menus are open. Your assistance would be much appreciated.
Mike
thanks man <3 get love from me <3
Hello. I really want this to work, but it doesn't.
On this tutorial page https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder, Sandra says this:
Jon, your solution is exactly what I’m looking for. Unfortunately since the navigations are now built in the theme builder some classes and IDs how now changed from your original code – i.e. #main-header and #top-menu. Any solution for the theme builder, pretty please with a cherry on top ?
Is there any truth to this? Does this need to be updated due to classes and ID names?
Any solution for the theme builder, pretty please with a cherry on top ?
🙏 Is there any truth to this? Does this need to be updated due to classes and ID names?
@rr-gs yes, this did not work with Theme Builder since they used different classes and structure. I've now updated this and tested on desktop and mobile devices. It should now work for both the regular Divi header menu, and Menu Modules within the Theme Builder.
Thanks. I appreciate you going to the effort. It's not working for me. I don't think my site has any of the IDs used in this code, based on searching Console. Something isn't lining up for me. I'll take a closer look, but thanks for doing this.
I ended up using this solution:
https://intercom.help/elegantthemes/en/articles/3725736-how-to-create-a-collapsable-mobile-menu-while-keeping-the-parent-links-active
I'm not sure how it lines up with this code, but it worked for me.
@rr-gs are you able to share your domain with me to see what the issue may be? I tested in Theme Builder, and it worked fine on a base install with Divi.
Thanks, but that doesn't works for me, i use menu built in theme builder.
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.
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;
}
Add styles (without
<style>tags) to your child theme CSS fileAdd script (with
<script>tags) to Divi Theme Options > Integrations > Body areaYou may need to tweak the
/* toggle icon */font color and size of the toggle element, based on your colors and typeface.