In this tutorial I will show you how to collapse Divi mobile menu submenus. You’ll also learn how to keep the parent item links clickable or disable them on mobile.
Additionally, you’ll be able to enable the accordion mode for collapsed submenus, which allows only one submenu to be open at a time.
Table of Contents
- Demo
- Why You May Need To Collapse The Mobile Menu Submenus On Your Website?
- How Collapsing Submenus Works
- Implementation
- Step 1. Add the JS for Collapsing Submenus
- Step 2. Control Submenus Visibility Using CSS
- Step 3. Add the Parent Menu Item Arrow Icons
- Step 4. Add the Combined CSS For Collapsing Submenus
- Step 5. Configuration
- Collapse Divi Mobile Menu Submenus Using Plugins
- Conclusion
- Frequently Asked Questions
Demo
This screenshot is showing the default Divi mobile menu on the left without collapsing submenus.
And the mobile menu with collapsed submenus on the right after implementing the solution provided in this tutorial.
The primary reason to collapse mobile menu submenus is to improve the user experience (UX) on mobile devices. In today’s mobile-first world, ensuring that your website’s navigation is both intuitive and user-friendly is crucial for keeping visitors engaged and reducing bounce rates.
Mobile users have limited screen space, and when a menu displays all submenu items at once, it can quickly become overwhelming. If your website has a complex mobile menu with multiple submenu levels, there’s a high chance that this menu will extend beyond the viewport when opened, forcing users to scroll in order to access items at the bottom.
Moreover, if the mobile menu is fixed, the menu items at the bottom may become completely inaccessible, leading to a frustrating experience for your visitors and potentially causing them to leave your site.
Collapsing mobile menu submenus is one of the most effective ways to address this issue. It reduces the overall height of the dropdown menu, ensuring it remains within the visible screen area across all devices.
By making submenus collapsible, you also give users control over which sections of the menu they see, keeping the menu clean, organized, and easy to navigate. This leads to a more pleasant and efficient browsing experience, enhancing overall user satisfaction.
However, neither the Divi theme’s default mobile menu nor the Divi Menu and Fullwidth Menu modules provide this feature by default.
That’s why in this tutorial, I’m going to show you two straightforward methods to solve this problem: a custom coding approach and a no-code solution. These methods will help you optimize your mobile menu, ensuring your site provides a seamless and mobile-friendly experience that meets your site visitors expectations.
How Collapsing Submenus Works
After applying the solution provided in this tutorial, the mobile menu submenus will initially be hidden. Clicking on the parent menu items will open/close their nested submenus.
By default, the parent item links will be disabled, so clicking either the parent item or the arrow icon will toggle the submenu.
However, you can easily configure it so that the parent item link remains clickable, allowing users to visit the linked page, while clicking the arrow icon will still toggle the submenu.
Additionally, you have the option to enable the accordion mode for the submenus, which ensures that only one submenu of the same level remains open at a time.
You can find more details about these features below.
Implementation
To implement the collapsing mobile menu submenus feature in Divi we’ll use JS and CSS. The JS code will add the functionality, while CSS will control the styling, positioning, and visibility of the menu elements.
Step 1. Add the JS for Collapsing Submenus
The following JS snippet adds all the necessary functionality for collapsing mobile submenus.
It works with the Divi theme’s default mobile menu as well as the mobile menus created using the built-in Divi Menu and Fullwidth Menu modules.
The code is commented properly to help you understand what each part of it does. Copy and add it into the Divi Theme Options -> Integration.
<script type="text/javascript">
(function($) {
/**
* Collapse Divi mobile menu submenus.
*
* Collapses Divi mobile menu submenus with
* options to keep the parent item links clickable
* and allow only one expanded submenu at a time (accordion mode).
*
* Works with the Divi default header as well as
* the menus created using Divi Menu and Fullwidth Menu modules.
*
* @site http://divicio.us/
*
* @param bool parentClickable Pass true to keep the parent menu item links clickable. Default: false.
* @param bool accordionMode Pass true to keep only one submenu expanded at a time. Default: false.
*/
function dvcs_collapse_divi_mobile_menu_submenus( parentClickable = false, accordionMode = false){
// Mobile menu
let $menu = $('.et_mobile_menu');
// Iterate the mobile menu links
$menu.find('a').each(function() {
// Menu hamburger icon
let $menu_icon = $(this).parents('.mobile_nav').find('.mobile_menu_bar');
// Remove click event handlers from the link
$(this).off('click');
// Check if the menu item has submenus
if( ! $(this).siblings('.sub-menu').length ) {
// Close the mobile menu on link click
$(this).on('click', (e) => $menu_icon.trigger('click'));
} else {
// If parent items links are DISABLED
if( ! parentClickable ){
// Replace the URL with the # symbol
$(this).attr('href', '#');
// Open/close the submenu on link click
$(this).on('click', (e) => {
dvcs_toggle_submenus(e, $(this).parent(), accordionMode);
});
} else {
// Add the "clickable" class to the parent (the <li> element)
$(this).parent().addClass('clickable')
// Prepend the icon to parent
.prepend('<span class="parent_icon"></span>')
// Open/close the submenu on icon click
.find('.parent_icon').on('click', (e) => {
dvcs_toggle_submenus(e, $(this).parent(), accordionMode);
});
// Link click
$(this).on('click', function(e){
// Toggle submenu if the link doesn't have a URL or anchor
if ( $(this).attr('href') === '#' ) {
dvcs_toggle_submenus(e, $(this).parent(), accordionMode);
} else {
// Close the mobile menu
$menu_icon.trigger('click');
}
});
}
}
});
/**
* Handle submenus toggling.
*/
const dvcs_toggle_submenus = (e, elem, accordionMode = false) => {
if(accordionMode){
// handle the element sibling's submenu
dvcs_toggle_visible(e, elem.siblings('li.visible'));
}
// hadle the element's submenu
dvcs_toggle_visible(e, elem);
}
/**
* Toggles the 'visible' class on passed element.
*/
const dvcs_toggle_visible = (e, elem) => {
e.stopPropagation();
e.preventDefault();
elem.toggleClass('visible');
}
}
$(function() {
/**
* Call the function with a delay to allow
* the mobile menu(s) be ready first.
*/
setTimeout(function() {
dvcs_collapse_divi_mobile_menu_submenus(true, true);
}, 700);
});
})(jQuery);
</script>Read below the description of the features added by this code.
This is the main feature, it makes the Divi mobile menu submenus collapsible. The submenus will be hidden by default, and users will be able to open them by clicking the corresponding parent items.
By default, users can click to open all submenus within the mobile menu. However, if you prefer to allow only one expanded submenu at a time, you’ll need to enable the accordion mode for the submenus.
Enable Accordion Mode For Submenus
As mentioned earlier, accordion mode ensures that only one submenu of the same level can be open at a time, effectively creating an accordion menu.
When a user opens a submenu and then clicks another parent item at the same level, the previously open submenu will automatically close.
This accordion menu feature helps to further minimize the height of the mobile dropdown menu, keeping the navigation clean, compact, and user-friendly.
The headers #11-#15 of the Smooth Divi Header Templates Pack are using this feature. Check them out on mobile to see how it works.
Keep Parent Item Links Clickable
By default, the implementation provided in this tutorial disables parent menu item links, meaning that clicking the parent items only toggles the submenu, even if a valid URL has been set for them.
However, you may want the parent item links to remain clickable, allowing your website users to visit the linked page when they click it.
To achieve this, you’ll need to enable this feature.
When enabled, this feature keeps the parent item links clickable (whether they have a link or an anchor, both will work), while clicking the arrow icon toggles the submenu.
If the clickable parent item doesn’t have a link or anchor, then clicking it will simply toggle the submenu.
This way, you can have both clickable and non-clickable parent items in your mobile menu, offering flexibility in how users navigate your site.
Step 2. Control Submenus Visibility Using CSS
Now let’s do the CSS part.
First, we need to ensure that the submenus are closed by default, and expand only when users click the parent menu items and/or arrow icons.
The following CSS handles the mobile menu submenus visibility:
/* Hide submenu by default */
#main-header .et_mobile_menu li ul,
.et-db .et-l .et_pb_menu .et_mobile_menu ul.sub-menu,
.et-db .et-l .et_pb_fullwidth_menu .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
}
/* Show submenu */
#main-header .et_mobile_menu .visible > ul.sub-menu,
.et-db .et-l .et_pb_menu .et_mobile_menu .visible > ul.sub-menu,
.et-db .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}Step 3. Add the Parent Menu Item Arrow Icons
Next, we’ll add arrow icons to the parent menu items to indicate that they have nested submenus.
We’ll also ensure that the icons are properly positioned and aligned to the right of the parent menu items.
/* Parent menu item */
.et_mobile_menu .menu-item-has-children.clickable,
.et_mobile_menu .menu-item-has-children > a {
position: relative;
}
/* Parent menu item icon */
.et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
font-family: "ETmodules";
text-align: center;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 16px;
}
/* Non-clickable parent menu item icon positioning */
.et_mobile_menu .menu-item-has-children:not(.clickable) > a:after {
position: absolute;
top: 13px;
right: 10px;
}
/* Clickable parent menu item icon */
.et_mobile_menu .menu-item-has-children.clickable > span.parent_icon {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
align-items: center;
position: absolute;
width: 46px;
height: 46px;
background: rgba(0, 0, 0, 0);
border-left: 1px solid #dcdcdc;
right: 0;
top: 0;
z-index: 9;
}Next, let’s add the arrow icon codes. We’ll use different arrow icons for the open and closed states of the submenus.
For closed submenus let’s use a down arrow, and for open submenus let’s use an up arrow.
/* Collapsed submenu's parent menu item icon */
.et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
content: "\33";
}
/* Expanded submenu's parent menu item icon */
.et_mobile_menu .menu-item-has-children:not(.clickable).visible > a:after,
.et_mobile_menu .menu-item-has-children.clickable.visible > span.parent_icon:after {
content: "\32";
}If you’d like to use different icons, simply change the icon codes as needed. You can find the appropriate icon codes in this complete set and unicode reference guide of Divi’s native font icons.
Step 4. Add the Combined CSS For Collapsing Submenus
Finally, combine all CSS snippets and add the them into Divi Theme Options -> General -> Custom CSS field (or into the child theme style.css file).
Step 5. Configuration
Both the accordion mode and the clickable parent links features are disabled by default.
But you can enable either or both of these features by simply passing a true value to the corresponding arguments of the dvcs_collapse_divi_mobile_menu_submenus() function. The first argument controls the clickable parent links, and the second one is for the accordion mode.
If you want to disable both features you can either pass false values for both arguments …
… or omit the arguments entirely, as the default values are set to false.
So far, we’ve explored how to collapse submenus manually using custom code. However, if you’re not comfortable with coding, I recommend considering the Divi MadMenu and/or Divi Mobile Menu Customizer (MMC) plugins.
Both plugins allow you to enable this feature too, with options to make parent item links clickable and enable accordion mode—all with just a few clicks.
Divi MadMenu allows you to collapse the mobile menu submenus and enable/disable the parent item links, and provides a lot more than that.
You can choose between two submenu styles – Expand and Slide.
The Expand style makes the mobile menu submenus open/close vertically when you click the parent menu item or it’s arrow icon. It comes with the Accordion Mode option which allows only one open submenu at a time.
The Slide style is available in two variations – Slide Right and Slide Left, making the submenus slide in from right and left respectively. Slide submenus feature is a great alternative to vertically expanding/collapsing submenus.
While Divi MadMenu allows you to create menus in Divi Theme Builder, the Divi Mobile Menu Customizer plugin(MMC) enhances the default mobile menu of Divi theme adding many additional features for the mobile menu in Divi Theme Customizer.
So, if you are using Divi’s default header on your site and would like to make the mobile menu submenus collapsible with additional options discussed in this tutorial, then the MMC plugin is the best choice for you.
Conclusion
And there you have it! With these methods, you can easily collapse Divi mobile menu submenus with accordion mode enabled, and decide whether to keep your parent links clickable or disabled.
Until Elegant Themes adds this feature in Divi natively this guide should help you enhance your site’s mobile navigation. If you run into any issues or have questions, I’m here to help—just drop a comment below.
And if you found this tutorial helpful, consider sharing it with others in the Divi community!
Continue Reading: Expand and Collapse Divi Vertical Menu Submenus on Click
Frequently Asked Questions
1. Does it work with Divi 5 headers?
Your Subtitle Goes Here
Yes. If you’re using a header built with the native Menu module in Divi 5, it will work with your header’s mobile menu as well.
If you haven’t created a header yet, you can follow this guide: How To Create A Divi 5 Header
2. How to collapse all levels of Divi mobile menu submenus?
Your Subtitle Goes Here
The number of submenu levels does not matter, it will collapse all submenus in the mobile menu. However, it’s best practice to avoid nesting menu items too deeply, as this can negatively impact user experience. I recommend having no more than two levels of submenus, but preferably just one.
3. How to collapse the previously opened submenu when another one is opened?
Your Subtitle Goes Here
You need to enable the accordion mode for submenus. It’s really easy to do, please check the Configuration section of the tutorial for more details.
4. How to prevent the mobile dropdown menu from expanding beyond the viewport?
Your Subtitle Goes Here
Start with collapsing submenus. If this doesn’t fully resolve the issue, you’ll need to set a max-height for the dropdown menu using vh units and make the mobile menu scrollable vertically. This will ensure the menu stays within the viewport, regardless of screen size, allowing users to scroll up and down to access all menu items.
This code is exactly what I was looking for however it throws a console error (Uncaught TypeError: Cannot read properties of undefined (reading ‘slice’)) every time I click open subnav. Everything works as expected even with this error. I saw another commenter mention this however you didn’t reply. Any thoughts on what might be causing the error? It is clearly the javascript. You can view on my staging site.
Hi Kevin.
Looks like the issue is caused by the click event propagation that eventually makes the Divi’s core JS throw the error you’re mentioning. To fix that try adding
e.stopPropagation();into thetoggle_visible()function like so:const toggle_visible = (e, elem) => {e.stopPropagation();
e.preventDefault();
elem.toggleClass('visible');
}
Let me know if it works.
Worked like a charm. Great work and thank you!
You’re welcome, Kevin, happy to help :)
Hi Ivan!
I’ve 3 parent items with subitems. On clicking one parent, opens its subitems. What I need is that if I open second the first should automatically collapse. Can you please help!
Hello???
Can you reply???
Hi Abhinav.
Sorry for the late reply, been busy lately.
You can try triggering the
'click'event on the previously expanded submenu parent link(arrow) when you click to expand a different one of the same level. This will require modifying the JS code and you should add that logic into the following block:if( ! parentClickable ){// existing code (don't remove it)
// add your code here for when the parent links are disabled
} else {
// existing code (don't remove it)
// add your code here for when the parent links are enabled
}
In your code just select the previously expanded submenu of the same level and trigger a click event on it’s parent menu item link (or the arrow if you’ve enabled the parent links) using the jQuery
.trigger('click')method , or vanilla JS.click()method.Hope this helps.
Hi Ivan,
We were using your code to help collapse the sub menus and add a toggle arrow to parent items.
It was working for over a year, and recently we haven’t been able to click the arrows to toggle sub menus.
Can you see any reason why those arrows aren’t toggling open the sub menus, instead the parent menu item links are being directed to.
Thank you!
Hi Chris.
I’ve just tested the code and it worked just fine both with the Menu Module and the Fullwidth Menu module.
If you’ve added the CSS and JS code as it’s explained in the tutorial and it’s not working then this could be a conflict with some other custom code or a plugin that has a similar feature, in such a case try removing the conflicting custom code(if any) and deactivate the conflicting plugin.
Or it is a caching issue, just make sure you clear all the cache properly and check if that helps.
Hi Chris, i’ve just checked out this sites menu, this is exactly the type of menu im looking to create.
I can’t seem to get this tutorial to work, could you send me the custom code for it?
Thanks alot,
A
Hi
This looks great, but it doesn’t seem to work with Divi Theme Builder, is that correct?
Hi Will.
This code works with the Divi Menu module, no matter if you use it in a page layout of Divi Theme Builder. Please make sure you follow the implementation instructions, and if you are still having issues please go through the comments below, maybe the same issue has already been reported before and there is already a solution provided for it. If not feel free to report it here and I’ll try to help asap.
If you’re asking about the Solution #1 (using the Divi MadMenu), of course you can use this extension with Divi Theme Builder, in fact that’s what it’s been created for :)
Thank you for this great tutorial, I’ve looked everywhere for something like this for the menu module. This works great except I have one item in the list that has no sub-menus. That item does not have the same background color as the rest in the menu so it may look like it’s not clickable. Is there a way to add similar styling there? Thanks!
Hi and thank you for the great tuto !
I had a few problem on smartphone with some Woocommerce pages but the “Eric’s solution” works perfetcly fine.
Great help!
Hello,
Your solutions works great. Except on my archive page it doesn’t work for some reason: campsolutions-staging.mars-cdn.com/vacatures/.
On the other pages it works fine.
Any idea how to fix this?
Thanks!
Kind regards
Hi Wouter.
When I click the “+” icon to expand the submenu it shows error in the Console which doesn’t seen to be related to the code from this post. Try to resolve that issue first, then check again if the submenu collapsing works.
Hi Ivan,
great Code! Just one little problem: When I click on the dropdown arrows they don’t open the sub items – instead the menu closes.
Do you know what problem this could be?
Thanks in advance!
Hi Anja.
I’ve checked your site menu and it actually works, clicking the parent menu item arrow expands the submenus as expected. Looks like it’s a caching issue on your end.
Hi great tutorial and code. Thank you very very much. I’d been looking for this and then gave up now i finally found it
ISSUE: I have a parent menu and a submenu but then the submenu has another submenu. How do i get the 2 menu to show the third
Hi Nito.
This code collapses all submenus no matter how many submenu levels the menu has, and clicking the parent menu item expands it’s immediate submenu. So, in order to show the lower level submenu you need to click on it’s parent item. Hopefully I understood your question correctly.
Thanks so much for answering but in mobile the submenu of categorias doesn’t display the other submenus.. This is the link to the website blog.puedocrecer.com and I also checked I really have submenus added in wordpress menu options under the categorias-hijos submenu item snipboard.io/NE6U2a.jpg
The submenu items are not visible because there is this CSS hiding them on mobile:
.desktop-menu-item {display: none;
}
It hides all menu items that have the
desktop-menu-itemCSS class, so, either remove the CSS snippet or remove this CSS class from the menu items on mobile and it should work.Hope this helps.
Wow i’d totally forgotten about that code I tried last time. You’re a genius!
I have another little thing to ask 😁 how can i make each submenu font-size smaller? and also change the color
It worked! Thanks Ivan.
You’re welcome, Jesper! :)
Divi reports these two CSS lines as problems… as “unexpected tokens”
grid-template-rows: 1fr;
grid-template-columns: 1fr;
Hi, SDA.
Just ignore it, it’s a known issue with the Divi code editor not recognizing CSS GRID properly. The CSS has no issues and works as expected.
This only works on my website if I start on the homepage then click the parent menu items it will take me to that main page and if I click on the + it will drop down and all my submenu items work. But if I’m on a parent page and click on another parent page just the drop down is activated.
Hi Catarina.
The code from this tutorial works for the Menu module headers but you are using Divi theme’s native header, so, it will not have any effect on your menu.
However, I’ve inspected your site and see that you already have a different JS function added to your site that works with the native header(
setup_collapsible_submenus), so, the issue is related to that JS function.Hi Ivan,
I’ve been searching for this solution. I’ve tried it with the divi menu module and the css code seem to work but when i tried adding the js script into Divi>Integration>Add code to the of your blog and click Save Changes button it will just keep on loading and does not save the js script code. Did i perhaps miss something?
Hi Aaron,
I’ve just tested this code again and didn’t notice any issues, I can save and it works. Make sure you copy the entire code (with the script tags) and add it that way.
Hi Ivan, thanks all works fine its what i need it!
i have some strange issue, the menu works fine in all the site, but on some certain pages, that are the dynamic pages created for the Woocomerce (the category pages) the script (and menus) doesn’t work, on t he pages created with the theme builder(product pages) works.
Any idea?
thanks a lot!
Hi Elvira.
You need to use stronger CSS selectors, please read my answer to Eric’s similar question below. Hope it helps.
Hi Ivan,
Thank’s for this code.
we red your answer to eric and copy/past the nes CSS code you published, but it still dosent’t work on woocommerce pages…
Thanks for a great tutorial! It worked fine, except the expansion arrows are not showing. What did I miss?
Check if you already have a different code snippet implementing the same collapsing effect, there is probably a conflict with that code, you’ll need to remove it.
After trying 3 other options this worked PERFECTLY. Thanks so much, you saved me today. :)
You’re welcome, Amanda. Glad it helped :)
Hi Ivan!
Great tutorial, it worked for me! I only have one problem. Since my menu is quite long, it often happens to be cut short by the phone screen and can’t be scrolled down properly along the page. Is there any solution to this? I hope I explained myself, thank you.
Denis
Hi Denis.
Set a
max-heightvalue in vh units for the dropdown menu to prevent it from expanding beyond the viewport, and set it tooverflow-y: auto;, this will make it’s contents scrollable vertically.Thank you again, this worked perfectly as well! Really appreciated
Hey Ivan,
It was so great to find this solution however after using it for a month or so successfully I have noticed one small change and I can’t figure out what is causing it. Recently unopened submenus have 2 downward arrows, i.e. v v and opened menus have a downward and an upward arrow, i.e. v ^.
Any chance you can take a look?
Hi Ewan,
I don’t see any issues, there is only one arrow.
Hey Ivan,
Thanks for taking a look. I managed to resolve the issue but it was late here so didn’t manage to report back.
Yep, seemed to be a a css anomaly. I went to Divi > Theme Options > Builder > Advanced > Static CSS File Generation…and clicked the Clear button. This seemed to resolve the issue and I have since disabled Static CSS File Generation. I use a caching plugin so I had a hunch it might be a conflict between that and the divi functionality.
I do have a couple of screenshots of when I was having the problem but I’m not sure I can post them on here.
Thanks again :D
Hi Ivan
Everything seems to be working fine before however now on mobile, when I click on the sub menus, they don’t seem to be showing, would you be able to see why this is happening? Perhaps any adjustments to the CSS?
formphysiorehab.com
Hi Manit.
I’ve just tested this code with the latest version of Divi(v4.5.7 at the time of writing this comment) and it worked fine, no issues.
I see in the console you have the jQuery is not defined error for some reason, that’s why the JS script is not working.
Hello, Could You Please Post A Tutorial About How You Made Your Website’s Header (Buttons,Search Icon,Submenus) Or Give Me The Code Please?
Thanks Alot
Hi Mudassir.
Divicio.us desktop menu is designed using the Divi Desktop Menu Customizer plugin and a bit of simple custom CSS(for CTA buttons), and the mobile menu is designed using the Divi Mobile Menu Customizer plugin.
Hi, can this be adapted to work on the slide in/ full screen menu?
No, it will require a different approach.
Any insights into that approach?
As far as I know, the parent links are not removed(which is good) but only disabled and clicking the parent item toggles the submenu, and this behavior needs to be changed somehow. I didn’t try to do that myself yet, so, can’t provide any clues, unfortunately.
Good day,
Thanks for the above.
I tried it on my divi site but it didnt work.
I actually am using the class mega_menu in my menu.
Kindly advise.
Appreciated
Hi Vikas. It works with the Menu Module and the Fullwidth Menu module, it won’t work if you’re trying to apply it to Divi’ default header.
The
mega_menuclass could be the issue as well because it applies different CSS to the submenu, try removing it and see if the effect works without it.Dear Ivan,
Appreciate your prompt response.
I have to keep the mega menu on desktop.
Can I create a duplicate menu using divi menu module and then disable it on desktop, use it only on mobile. (In order to use your css and jscript).
Vice versa will disable the desktop menu on mobile.
Could you kindly guide.
Yes, it should work that way (don’t add the
mega-menuclass to the menu module enabled on mobile devices).This is amazing! Thank you for your work
Hi Ivan !
First, thank you for your work and your explaination, it helped me a lot ! It’s a very nice and beautiful touch in mobile device. Thank you again !
I have just one question, is it possible to change the colour of the background of the parent menu ? Currently, parnts menu are with a grey background, do you think is possible to change that?
Best,
Hi Theo.
Use this CSS to apply a different background color for the parent menu item:
.et_mobile_menu .menu-item-has-children > a {background-color: #000000;
}
Hi,
Cool tutorial :-)
I still use the regular Divi menu, so not the module or fullwidth menu.
What do I have to adjust to the code to make it work?
I’m not usually commenting on the code and solutions, but this ti,e it is different. I want to express my sincere gratitude to your work. This is a very useful piece of code. Thank you for your time and effort.
Thank you too, Andrey! Glad you find it useful :)
This works really great! I have been looking for this for a while and I can’t write my own code since I have no background in web designing. Thank you.
I have a question tho, how can I adjust the size (width) of the dropdown menu?
Hi Dee, please check out my reply to mhb below about changing the dropdown menu width.
After spending the past 3 days working on making this work on my own… I finally found your post and am elated! (this really should be core Divi functionality!)
One question… I may be able to figure it out, but is there an easy way to have only one submenu active at a time (i.e. opening a submenu will collapse any currently open submenus)?
Thanks again for your excellent work on this super frustrating problem.
Dustin
Hi Dustin,
you mean like an accordion, right? It is possible to do and I will update this tutorial to include such a feature asap.
+1 on this one. Thanks for the solution!
Hi Ivan
Thanks for the great piece of code! Have you found a solution for the accordion issue yet?
Best
Sebastian
Hi Sebastian,
no, didn’t have time to update the code yet, been busy working on the Divi MadMenu module(which BTW provides the Accordion Mode for the mobile menu).
First of all Thank you very very much for this trick….. It really helps me a lot….. But Sir only one thing….. Is there any way of adding a little bit transition (e.g. .3s) when opening and closing sub-menus…… Please…..
Hi Mohtsim.
Unfortunately, that’s not possible at the moment because Divi mobile menu submenus are using the
!important(they’re set todisplay: block !important;) by default which makes animating them impossible. This needs to be fixed in Divi’s core stylesheet (the!importantneeds to be removed).Hello there!
Great work, it works accept it doesn’t work on my WooCommerce archive pages (shop and category) > I already tried to disable all plug-ins or looked at my CSS. but something is blocking the function.
Maybe you know a quick answer?
Tnx!
Yes, Eric, you are right, it was not working on WooCommerce pages (and any CPT page), I’ve updated the CSS part, please delete the old CSS and use the updated one.
The reason why it was not working is that Divi uses a stronger CSS selector for setting the submenus to
display: block !importantin the CPT stylesheet(style-cpt.css) thus keeping them always expanded. I used the same selector for the CSS above and now it works fine. Thanks for the heads up. :)Thank you Ivan! I had to add the following selector to the /* Hide submenu by default */ area in the style sheet:
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu
But now it works!
Thanks!
Dear Ivan,
Thank you very much for your work! I am experiencing a problem… My submenus on a WooCommerce site are always espanded… Do you know why? Thank you in advance!!!
Cheers,
Christoph
Hi Christoph,
please try Eric’s solution above, it should work.
I have the same problem, no menu collapse! :(
How i could resolve?
Thanks
Inspect the page using browser DevTools to check what is keeping the submenus expanded. Most probably there is a stronger selector which applies display: block; to submenus. Try Eric’s solution.
Hi Ivan,
Thanks for the code. I am facing the same problem of no menu collapse on WooCommerce category pages. I used Eric’s Solution but it is still not collapsing the menu.
Any suggestions?
Regards,
Warun
Hi Ivan,
Thanks a lot for the code. It works nicely except for woocommerce category pages.
It is interesting as it does work for empty categories.
I used Eric’s Solution and added the code in CSS but it did not have any effect on this.
Any suggestions on how to fix this?
Regards,
Warun
Hi Warun.
I inspected your category page and didn’t see the custom CSS and JS from this tutorial, try clearing all cache (Divi’s cache as well) and check again.
Hello,
I have the same problem than Eric, it’s not working on woocommerce pages. I used your custom CSS but it doesn’t change anything. I don’t know how to use Eric’s solution (I am not a dev myself). I found style sheet but then I don’t know what to do. Could you help? thanks a lot
Hi Olivia.
Try adding this CSS to your site:
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul {display: none!important;
visibility: hidden!important;
}
Hope this helps.
This works perfect. Is there a way to make the dropdown menu wider ?
Try this:
/* make mobile dropdown menu wider */.et_pb_module .et_mobile_menu {
width: calc(100% + 30px);
left: -15px;
}
this CSS adds 30px to the dropdown menu width and centers it using the
leftproperty which needs to have a value equal to the half of the added amount (30px/2 = 15px) with a minus sign.Thanks. Worked perfect. Divi gives 2 errors though in these lines
grid-template-rows: 1fr;
grid-template-columns: 1fr;
Saying Unexpected token ‘1fr’
The code editor seems to not recognize the
frunit(which is a CSS Grid specific unit) but it does not break the CSS. Just ignore those warnings.This is super cool the only thing that would be even cooler is if the expand and collapse was smooth in and out. :-)
My goodness, I’ve been looking for this solution all over the place. Thank you, thank you, thank you! Any idea how to target styling for the subsequent nav levels? I have the main nav – then a toggle menu item – with another level of toggle menu items.
I was able to make it happen in the desktop view but it won’t work with the mobile nav (changed #menu-main-menu to #mobile_menu2)
Here’s the code I used for desktop:
/* First Submenu Item */#menu-main-menu li.mega-menu > ul > li > a:first-child {
font-weight: bold;
text-transform: uppercase!important;
}
/* Second Item */
#menu-main-menu li.mega-menu .sub-menu .menu-item a {
text-transform: capitalize;
}
Thanks Sandra, I’m glad it was helpful.
Try these selectors for mobile menu:
/* First Submenu Item */.et_mobile_menu li.mega-menu > ul > li > a:first-child {
font-weight: bold;
text-transform: uppercase!important;
}
/* Second Item */
.et_mobile_menu li.mega-menu ul li a {
text-transform: capitalize;
}
Yeah that didn’t work for me for some reason. It just takes on the second item styling for the first item as well, don’t understand why. Any other ideas?
I simply adapted your CSS snippet for the mobile menu. You can try this for the second item as well:
/* Second Item */.et_mobile_menu li.mega-menu .sub-menu .menu-item a {
text-transform: capitalize;
}
If still not working try to inspect the menu items using browser Dev Tools to check if some other CSS is overriding your CSS. Hope this helps.
Hi. Congratulations for the good work.
I made the code work in the native menu with a few simple changes (removing selector .et_pb_module) but my current problem is in an installation with divi 4: it works correctly in desktop browsers but not in mobile.
Is there a problem with the click events that I can’t solve, do you have any idea about it?
Hi Mario.
Do you mean it works in browser mobile devices emulator but not working on actual mobile devices? Can you please provide the url?
Thanks for your question. It failed both in the Chrome Mobile emulator, in real iOS devices (iPhone + iPad) and in Android. Finally I got it to work by adding the “touchend” event in the code line 42 for Parent Links NOT Clickable:
// Open/close the submenu on link click
$(this).on(‘click touchend’, (e) => toggle_visible(e, $(this).parent()));
Although I don’t like it, it was the only way it worked …
That’s weird… I just tested it on an Android device and worked without any issues. Did it work for you with the menu module before you adjusted the code for the native menu?
My 1st test was with a native DIVI menu and it worked ok. I have had the problems with a DIVI 4.0 installation and a custom header. The changes in the code to make it work have been simple (changing some selector), except for the problem of the “click” event, which the mobile devices did not detect. I get the feeling that there is a problem with the assignment of events from the Divi core.
Hi, I did use it for the menu module but it doesn’t work :/
What’s wrong? it seems to be et_pb_menu rather than et_pb_module no ?
Thanks
Hi Laura,
you can use the .et_pb_menu class but it will work for the Menu Module only and won’t work for the Fullwidth Menu Module which has the .et_pb_fullwidth_menu class. Using the .et_pb_module class ensures that the script works for both the Menu Module and the Fullwidth Menu Module.
Make sure you added both CSS and JS code and that there are no any conflicts and/or errors, its hard to say why it would not work without inspecting the page.
i follow the all script….but not working
Hi Halim.
It works for the menus created using the Menu Module and the Fullwidth Menu Module. It won’t work if you are trying to implement it for the native header of Divi theme.