A Beautiful Way To Collapse And Style The Divi Mobile Menu
One of the most common requests from our popular Divi Mobile Menu Styling Tutorial is the ability to collapse the submenu items. So today I am showing you what I believe is the best and easiest way to do this. I’ll also add some great looking toggle icons and show you how to style those as well. This tutorial is best used along with some of our other Divi Menu Tutorials to get a well rounded beautiful Divi mobile menu.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
1. Add Some jQuery To Collapse The Divi Mobile Menu Submenus
The idea here is to change the Divi mobile menu from a boring, expanded list to a beautiful compact list. We can do this by adding some jQuery and CSS code. This will not only collapse the mobile Divi menu submenu, but also will add some nice toggles that can be used to indicate to the user that there are more items to show and where to click. This tutorial comes in two parts, one for each type of code. Both of them work together and both are needed to make it work.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script >
jQuery(function($) {
$(document).ready(function() {
$("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function(event) {
event.preventDefault();
$(this).parent('li').toggleClass('dt-open');
$(this).parent('li').find('ul.children').first().toggleClass('visible');
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
});
iconFINAL = 'P';
$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
$('.mobile-toggle').on('mouseover', function() {
$(this).parent().addClass('is-hover');
}).on('mouseout', function() {
$(this).parent().removeClass('is-hover');
})
});
});
</script>2. Add Some CSS To Collapse The Divi Mobile Menu Submenus
The next step is to add the corresponding CSS code. This code works alongside the jQuery, and together they create the Divi mobile menu collapsed effect.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*change hamburger icon to x when mobile menu is open*/
#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';
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: "ETModules";
content: '\33';
color: #00d263;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: '\32';
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}As you can see, each of the snippets are labeled. This does a good job of explaining what each one does. As always, feel free to customize anything like colors and sizes.
Option: Use Parent Menu Item As Toggle For Submenu
This seems to be a big question in the comment section, so I am adding the answer here. If you want to essentially remove the parent menu item link and use it as the same toggle mechanism as the dropdown icon. Instead of linking to that page, it will be used only as placeholder text and a toggle.
<script>
jQuery(document).ready(function(){
jQuery(".et_mobile_menu .menu-item-has-children a").each(function(){
jQuery(this).click(function(event){
event.preventDefault();
jQuery(".et_mobile_menu").toggleClass("pa-block");
jQuery(this).siblings("ul").toggleClass("pa-submenu");
})
})
})
</script>.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}
.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}
.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
text-align: right;
width: 100%;
}Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Related Tutorials To Help With The Divi Mobile Menu
In our video and tutorial, we are using some code to help the mobile menu look better. This all comes from our Divi Menu tutorial series! I recommend checking out those other tutorials for lots of helpful and fun stuff!
Hi Nelson,
Do have an idea of how to use this snippet on the vertical desktop menu like here?
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-vertical-navigation-menu-or-header-for-your-divi-website
Hi Mike, I’m not sure it would matter since my tutorial is for mobile, so whether it is horizontal or vertical on desktop would not affect it.
Hi Nelson,
Tried your solution and it works … only once
Not sure why but the first moment I check on my mobile it works and 5 minutes later, it doesn’t. It’s frustrating. Any idea why? More importantly: what do I need to do to make this a permanent solution?
Thanks, Hanno
Once I refresh my browser the menu shows the old uncollapsed menu. But if I press Save changes in Divi Options, it works for another minute
I just wanted to send a deep thank you to this blog – I use your tutorials every week, you’ve taken hours out my searching every week. I think Divi should be paying you a salary!
Thank you so much Rowen, that would be awesome but I’m on my own at this point 🙂 So glad you are enjoying the resources!
Hi Nelson, thank you for the snippet!
I have a small problem, i see 2 arrows instead of one. how is this possible ?
Thanks!
It sounds like Divi is just stripping out the forward slash \ in the code before the icon number.
how do you fix it?
Hi Brad!
We can see the issue is resolved now from Divi end. Can you please share the URL of the page so that I can check further?
Hello friend, I have a lot of tutorials.
I have a large menu on my website and when I want to see the names of the menu that are below, I can’t keep going down. Do you know how to solve that? Thank you very much
Hmm, I don’t understand, but you can share a link but I don’t know if I’ll be able to help or not.
http://cirfaa.org.ar/
When I scroll the menu and the menu is longer than the screen I can’t keep going down and see the menu that follows. It is difficult to explain, but if you open this site with your cell phone and open all the + you will see that once the menu occupies more space than the size of the screen you cannot continue to see the ones below.
Thanks for answering!!
It’s because your header is sticky 🙂
Great Tutorial… you’re the first one with this kind of tutorial where the collapsible mobile menu is working too if a mega menu is in use! Well done Nelson… really well done. Thanks for this
Nice! I looked at all of them before posting and kind of took the best of all of them and made this, so glad to hear it is working for mega menus too!
i sort of works but it has so many problems with it, i will just delete it. thanks for tying tough 😉
Hi Robertina,
It all works great, if you have a specific question you are free to ask.
Hi Nelson
My menu has multiple levels of submenus, how can these submenus also be folded and opened？
thanks
Hi Nelson,
thank you for a great post!
I also have the problem with 2 arrows instead of one. Do you have a solution to the problem?
Thank you!
Hi Pär,
I answered this in the other comment, it sounds like Divi is just stripping out the forward slash \ in the code before the icon number. So just make sure when you paste the code, it remains there or add it back.
Thank you for your reply! I am sorry for being stupid, but I cannot find forward slash \ in the above code either? So I do not really know where to start?
Add forward slash before the number: Example: content: ‘\33’;
Hello Par, you need to update this line
/*submenu toggle icon when open*/ ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after { content: '\32'; }Hi Nelson,
Thank you very much for this. With the forward slash correction, works a treat. However, I note that the dropdowns only show when you click the actual arrows. Clicking the section title just closes down the menu. Setting ‘Disable top tier dropdown menu links’ on theme options should stop that being a link, I thought. I checked your own site and works the same. Click Store and the page just reloads. You have to click the actual arrow to get the dropdown. Any ideas?Salut, Robin
Hi Robin,
That works as expected though. In other words, nothing is wrong with it, but if you want, you can certainly experiment changing it. I want people to be able to click to those pages, but if those parent links are not links, like in the menu, then just don’t set the links…set a # and then when it is added, remove it, and it won’t click.
Nelson, logical thinking, thanks.
Hi Nelson, Your site is fantastic, thank you very much.
One question, can you make it so that I can click on the submenu text and it also opens and closes, without having to necessarily click right on the icon?
Even if the text is not a link it always acts closing the whole menu instead of opening or closing the submenu toggle. Can you think of any ideas to modify?
I’ve implemented it on https://franciscojoss5.sg-host.com/ (still under construction).
THANK YOU!!!
Hi Francisco,
We will see what we can do, but in that case the parent menu item can’t be opened.
Fantastic! this code works perfectly in my website, thank you very much!
You’re welcome Nicolas!
Great tutorial, but I’m having a hard time getting it to work. Right now, it’s on my staging site. I’m happy to give you the link. Maybe, though, you know what’s up by the video/link/ Thanks!
I don’t know Phil, I do see some error there in your clip. The tutorial does work well, so I’m not sure what is happening on your site. Just double check everything I guess.
It was a me issue.
I had some conflicting jQuery blocking it. All better now.
Great tutorial!
Glad to hear it is solved!
I have only been using DIVI for a few months and your posts have helped me a lot before I made the decision to buy some plugins. While it is true that many are necessary, savings on simple things are always welcome. Best regards from Chile.
Hi Christian,
Nice to meet you, I’m so glad my posts have helped! Yes, there are times for code, and times for plugins. Thankfully we all have options! 🙂
Seems like the indetation/spacing on the submenu items is not working showing on my site: https://www.o21.nu/
Also the hamburger icon seems higher than before, not aligning with the search icon on iPad.
Any idea why? Got a fix?
I think you have some other CSS on your site, for example I see a margin of 10px that is causing that
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
and your submenu items have the same padding
.et_mobile_menu li a {
border-bottom: 1px solid rgba(0,0,0,.03);
color: #666;
padding: 10px 5%;
display: block;
}
so you could change that if you want by targeting them with .et_mobile_menu li ul li a
Thanks, it was actually a CSS code from you; changing the layout of the submenu, just changed it to only target desktop 😉
Hi, dear Thanks for your helpful content.
But I am facing some problems and don’t know how to solve that. Can you please help me in solving that? As https://codefossils.com/ this is my site. I use your CSS code that helps me in removing the submenu in mobile view but whenever I tried to add your javascript code to my site. I am unable to add that you can see that in the attached image. the circle rotates round and round but nothing happens I am waiting for more than 2 to 3 hours but the behaviour remains the same. still unable to add that.
I will really appreciate that if you help me in solving my problem.
eagerly waiting. 🙂
This issue is not because of the jQuery Code and there are many reasons for this to happen. Firstly, this can be a plugin conflict so please try to disable all the plugins and then check if the problem still persists or not. If the issue is still there then it could be happening because the server is blocking the code thinking that it is a virus. So to tackle this you need to contact your server host and ask him to disable the mod securities.
Hi Nelson, I’ve used this on several sites. Super easy to implement. Love it.
On the site I’m moving over to Divi today, the dropdown menu’s parent item is not a link but. In the menu I have the link set as #.
The site is https://awemoneyandme.com/.
The dev site is https://tscpreview.net/.
This works great on the desktop. On mobile, if the parent item is clicked the child menu items stay closed, the page reloads.
For example:
Workshops (this has no page but in the menu has a # for the link)
Money and Me
Lifestages
Any suggestions on how to handle the mobile menu so that when Workshops is clicked it opens the menu instead of reloading the page?
Thanks!
The URLs that you have mentioned have limited access so I couldn’t see the content inside. Could you please fix this issue so that I could investigate the problem further?
The dev site has been moved to live at https://awemoneyandme.com/. I deactivated Wordfence so you should be able to see the site now. I really appreciate your feedback!
Operator issue…of course your script works. sorry to have bothered you about this.
I am glad that the issue is resolved now. 🙂
Hi Nelson,
I have an isue with the mobile toggle not showing up on all pages anymore except one! And that (LearnDash) page is being excluded from caching. ( https://bijbelstand.nl/courses/online-training-bijbelstand/ )
What is causing that issue? Should I excluded some .js and if yes, wich one?
Thanks, Ron
The toggle is happening perfectly on the website but the problem is that the cross icon is not showing up when we open the menu. So to show the cross icon when the menu is open, please place the code given below in the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel:
.et-db #et-boc .et-l .opened .mobile_menu_bar:before{
content: "\4d" !important;
}
Please place this code and let us know that how it goes. 🙂
About the learndash issue, could you please explain that in the little for me to more detailinvestigate further as I am not able to see any error on the URL that you have shared?
Hi Nelson, thanks for the reply. It was a script error hat causes there problem.
Solved now!
I am glad that the issue is resolved now. 🙂
Hi Nelson,
finally a solution that works. Even ET’s blog post did not work for me. Thank you so much.
I just had to add this to make the menu wider:
.et_mobile_menu {margin-top:20px;width:230%;margin-left:-65%;}Great to hear, thanks for sharing!
Hi,
Thanks so much for this amazing tutorial. Finally, a way to vastly improve Divi’s mobile menu without the bloat of adding another plugin. But I’m running to an issue where when I click (on my laptop with Chrome/Edge dev tools open) or (tap on my iPhone 8 with the latest version of Safari) on of the arrows to unfold the menu, the second and third level menu items don’t appear. Instead, I’m taken to the parent page. Any idea what might be causing this? I deactivated all plugins with no change. When I look in dev tool’s console, I see the error shown in the attached screenshot. I’m thinking this may be the cause, but am not sure how to go about resolving it. So, any insight you could offer is greatly appreciated!
PS. Since this is a staging site, if you need credentials to take a closer look, please let me know. Thanks again!
I am not able to see any screenshot with the comment. Could you please provide the URL of the page for me to investigate further?
Hello Nelson, your tutorials are as always efficient and detailed and I thank you: But this time I am writing to ask you if they can create conflicts with previous codes, let me explain:
I used your tips and codes to implement the hamburger function with the x and the word “menu” on my site, they work perfectly. Now I have entered the codes to display the word “New” in the menu and in the submenu always following your suggestions. I noticed that the menu in the tablet and smartphone version appears extended. So I followed your suggestions in this tutorial to compress it, and put the codes where you indicated, but …
It happens that the menu appears compressed but the arrow to open them does not appear.
Could you help me?
We are glad that our content helps you with your website. Coming onto the issue, for our better clarity could you please share the URL of the website for us to investigate further?
Hi Nelson,
I entered the CSS and it worked but the arrows in the menu didn’t appear. Instead, I see light grey slivers you can barely see. How do I edit the icons (arrows/grey slivers) in the menu if the arrows didn’t show up or if they aren’t arrows after entering the code?
Great tutorial by the way and many thanks!
Hi Lydia,
I really don’t know what you mean. You would have to share a link or use different terminology.
sorry I’m new at web designing. Basically I followed your video and did what you said but the end result was not arrows (you have green arrows in yours) in the mobile menu for the hidden submenu dropdowns. The code worked in hiding the submenus in the mobile dropdown menu but the icon for the drop down was not an arrow or me. I’m wondering why the CSS code didn’t work and what part of the CSS specifically creates the arrows? Hope this makes sense: thanks for the quick reply
The code snippet given above is very neatly labeled. When you will see the labels, you will find two labels which say /*Submenu toggle icon when closed */ and /*Submenu toggle icon when open*/ under that label, the content \33 and \32 are the toggle icons. If the code is not working for you then it might be possible that you are having some console errors so could you please share the URL where you were trying the code so that we can investigate further?
This is a response to Hemant Gaba: Thank you so much for explaining what it should read for the toggle icons. It’s strange but when I copied and pasted the code, the content \33 and \32 for the toggle icons was missing. I added those into my code and now have arrows in my dropdown menus! Thank you thank you thank you!
We are really glad that the issue is resolved now. 🙂
Thank you for all the great tutorials!
I was wondering if there is a way to click on the name of the menu (instead of clicking on the arrows) to get the menu to drop down. Let say, in your case, you click on “Menu Item” to show all your submenu items.
Hopefully, you get what I mean 🙂
/Fredrik
I am assuming that you are using a Theme Builder header and you want to show or hide the submenu by clicking on the menu item name. To do that, please paste the jQuery code given below in the Divi > Theme Options > Integrations > Head Panel and place the CSS in Divi > Theme Options > Custom CSS Panel:
jQuery(document).ready(function(){
jQuery(“.et_mobile_menu .menu-item-has-children a”).each(function(){
jQuery(this).click(function(event){
event.preventDefault();
jQuery(“.et_mobile_menu”).toggleClass(“pa-block”);
jQuery(this).siblings(“ul”).toggleClass(“pa-submenu”);
})
})
})
.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}
.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}
.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}
This code will give you the desired results and after that, you can style the menu as per your liking.
Let us know if that helps. 🙂
Hey!
Thank you for your answer, and sorry for a (very) late response.
I’ve tried this code, but can’t seem to get it to work. So, I will try to be more specific.
As you said, my header (a mega menu) is made with the Divi Theme Builder. So, on mobile view, I would like to be able to click on the name to show the sub-items.
If I have the following structure, I want to be able to click on the names (first Sunglasses, and then Brand) AND/OR the arrows to show the brand names:
Sunglasses ⌄
Form ⌄
Brand ⌄
Rayban
Oakley
BOSS
Hope this gets clearer! 🙂
Thanks,
Fredrik
Never mind my latest answer. I actually solved it myself 🙂
I replaced this code:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
with this code:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: right;
opacity: 1;
width: 100%;
padding-right: 5px !important;
}
This way I could extend the “click-box”. Maybe not a fancy solution, but it works!
Best regards,
Fredrik
Hi Nelson,
First of all thank you for all the work you put in all these tutorials.
I’ve just many of them and always with succes.
Unfortunately i’m having the same problem as Lydia with this tutorial.,
Even when i add the \33 and \32 nothing is happening. There is no hidden submenus and now arrow or another icon.
Could you please share the URL of the page for us to investigate further?
http://www.bergaya.nl/home
If I use the above jQuery and CSS code, I can properly see the icons in the mobile menu. Please make sure that you are placing the code in the right place. You need to place the jQuery code in WordPress Dashboard > Divi > Theme Options > Integrations > Head Panel and place the CSS code in WordPress Dashboard > Divi > Theme Options > Custom CSS Panel.
Please let us know if that helps.
Hello Nelson,
Thank you for this snippet it is very much helpful.
I have a question ..like in my header I have a button but I want to place it in the mobile menu. I follow your videos I thought you could help me with this.
For that please add one more menu item in the menu by going to the WordPress Dashboard > Appearance > Menus and after that design the Menu item to make it look like the button. You can hide that Menu Item for the desktop and tablets by using media queries.
Your code seems got changed last I used it, and it making a problem for css. Here is the old code
/*change hamburger icon to x when mobile menu is open*/
#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”;
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
font-weight: 400;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: “ETModules”;
content: “\33”;
color: #b699c8;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: “\32”;
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: “”;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
position: relative;
display: block;
bottom: 0px;
line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff !important;
border-radius: 10px;
}
I am afraid that I am not able to understand what the query actually is. Could you please elaborate on the issue that you are facing on the website and share the URL of the website as well?
Hi, congratulations for the always very interesting site,
I can’t fix the open and close cross in the mobile menu, could you tell me where to go for the change, Thanks
https://www.prolocoollolai.it/
Hi Danilo
I am afraid that I am not able to replicate the issue on my end as the plus and the cross icons are working absolutely fine. Could you please try clearing the cache or checking the website on a different browser or device and see if that helps?
Please let us know how it goes. 🙂
Hi great example,
Works for me but, when open in a mobile you need to push the icon for open and collapse.
How i can make in whole item?
Thank You!
Hi there,
Could you please share the URL of the page for me to investigate further?
I have the same issue, my url is https://addendum-pro.de/.
On the mobile version of the menue, I would like to open the child links when clicking on the name of the parent (for example “Für Bewerber”). Right now, the child links only open when clicking on the arrow on the right side.
Is there a solution? Thank you! 🙂
Hi Anneke,
As I could see on the URL that the query you mentioned in the comment is resolved. Please let us know if you need any further assistance. 🙂
Hi, I’ve used this snippet to collapse a mobile menu on desktop created using your other tutorial code. The only issue I have on desktop is that the toggle arrows overlap the menu item name. What’s the fix for that?
Here’s a screengrab of the issue on desktop: https://snipboard.io/QzYrp4.jpg
Cheers
Could you please share the URL of the page so that I could investigate which code is causing this issue?
Of all the various solutions for this Divi mobile menu problem, the one presented here is the only one that works “out of the box” in all contexts! The commenting out of the CSS is extremely helpful. Divi’s own “official” solution is to use the Theme Builder, which is not really that handy when you’re dealing with a site that is already running off a Divi child theme, using things like Global modules.
I’m glad you enjoyed the tutorial, Phil!
Hi, Thanks for the tutorial it was very helpful, and I was able to solve the issue with the mobile menu not collapsing. But seems the “x” icon is not reflecting in my case, also some “P” alphabets are coming when expanding.
Any idea what might be the issue and how it can be fixed?
URL: http://www.stoptoexplore.com
It looks like some issue with Autoptimize.
Hi Nelson,
Thanks for the response. The issues with “X” icon not reflecting got resolved but the “P” is still visible. I disabled Autoptimize, cleared the caches. But still see the same 🙁
Any other suggestion ?
When you inspect that you will clearly see it is caused by Autoptimize. This is not a tutorial or Divi issue.
Hi Nelson, great tutorial as always!
Works great for me, but how can i put the first menu item opened?
Thanks! Sorry, I’m afraid I’m not sure and that is a beyond the scope of this tutorial.
Thanks for trying, but the jquery seems to be the same approach as a solution I tried on another client site probably ten years ago, and my problem with it is that when the user clicks on any parent menu item, they expect it to open that item, but instead, it causes the whole menu to fold up. I don’t want to frustrate site visitors, and this behavior is going to do that.
I do appreciate the effort, as well as many of your other code snippets!
Not sure what you mean. If a parent menu item is an actual link, then it needs to be a clickable link…not open the submenu. Opening the submenu of a parent item needs to be done via the icon. Otherwise you lose access to that main parent page link.
Hi Nelson, I posted a comment for help yesterday, but it is not even showing for me as pending anymore. Anyway, my question was if there is a way to make a menu collaspible to look different for pages that I have a new header for using divi builder? I have the collaspe code already for the rest of the site but I want the sports pages to look different. You can see the testing version on my test site: https://diananashif.com/mca-sports-mainpage/
The main MCA site that I will be moving these pages and new header to is: https://mannahouseacademy.com/
Appreciate your guidiance on this…….
All the best,
Diana
Hi Diana,
The feature of showing the pending comments is removed now but we get all of your comments and we are here to help. 🙂
Coming to the issue, I am not sure that I totally get what you are trying to say but this is what I understood:
You have the code for the collapsable menu that is being applied to all the pages but you don’t want to apply that code to the sports page so what you can do is instead of placing the jQuery or CSS code for the header in the Integrations or Custom CSS Panel, you can go to the template where you want that code to take effect, add a code module and place the jQuery and CSS code wrapped in there respective tags in that module. This way the code will only be applicable to that very page and not the rest and this you can do with other templates as well so the page where you will not add the code will not be affected and can be designed differently.
Let us know if that helps. 🙂
Hi, The icon is on top of the menu element… Any help how I fix this would be much appreciated.
Hi Dan,
On my end, I am not able to replicate the issue that you stated in your comment on the given URL. Please provide the URL of the website where you are facing this issue.
My icon seems to be overlaying on my text. And the icon is a weird football shape.
Any ideas.
View on desktop.
https://journeychurchorl.flywheelsites.com/
journeychurch
journeychurch
Hey Evan, As far as overlapping is concerned I am afraid that I am not able to replicate the issue on my end and everything looks just fine. Talking about the icon styling and shape, it is because of the CSS Snippet that is present in the guide and you can change the snippet as per your liking.
Hemant, Thanks! This code is great, but I have the same vague football shape icon too. I don’t understand where to change that in the code??? A “+” symbol would work too. Or, the arrow that’s mentioned in the blog would be fine. Help please. https://peakrhythms.com
Thank you!
Hemant,
Never mind. I fixed it.
Thanks!
Jon
I am glad to hear that the issue is resolved now. 🙂
Please let me know if you need any further assistance.
This tutorial worked great for refining my mobile menu display. Thanks!
Do you have any tutorials for collapsing the Divi menu submenus on a desktop?
Hi Jesse,
I am a little confused here as the submenu are collapsable by default on desktop view so could you please elaborate on the issue a little more?
Hi Hemant,
The tutorial works great for mobile screens, but when the menu is displayed on screens with larger breakpoints, it doesn’t collapse the submenu’s second and third level menu items. I was wondering if there was another tutorial on how to collapse the second and/or third level submenu items for screens with larger breakpoints. Ideally, the desktop menu’s third level submenu items would also collapse–creating a flyout or stacked list when hovered over. Right now all of the submenu items are displayed at once on the desktop.
Thank you for your help.
Could you please share the URL of the website for me to investigate further?
Hi Nelson,
thank you for this great tutorial!
I just have a question to the 2nd level (when there is a 3rd level in the menu). In this case the toggle on the 2nd hierarchy is not right aligned. It is positioned directly after the menu item name.
How can I fix it that the toggle is right aligned as in the top level/1st hierarchy of the menu?
To clarify what I mean, please take a look in my loom video: https://www.loom.com/share/513b3b775e754f3c97838ffbc2657a21
Best regards,
Christian
Hi Christan,
I understood your problem and it would be great if you provide the URL of the website for me to investigate further.
Hi Nelson,
I admire your work, I request your help. Sory bad grammar 🙂
I clicked it and the first menu opened with submenu . Then I clicked on a second menu. Opss, the first remained open!
I have a very large menu content so, how to automatically close the open menu item (with submenu) when clicking on another menu item? what should i add in the code below?
(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $(‘.et_mobile_menu .first-level > a’);
FirstLevel.off(‘click’).click(function() {
$(this).attr(‘href’, ‘#’);
$(this).parent().children().children().slideToggle(‘reveal-items’);
$(this).toggleClass(‘icon-switch’);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
Hi Hilmi,
Could you please try the code given below and see if that helps?
Code: https://www.codepile.net/pile/3jd1zXxd
Let me know how it goes. 🙂
Hi, I’m looking for the solution mentioned in this comment. However the code you provided here https://www.codepile.net/pile/3jd1zXxd does not work for me.
Any advise? Pretty please, as I’m banging my head here for many many hours 🙁
Hi,
I wrote this before, but my comments weren’t shown.
I have the same problem and the code you suggest doesn’t work on my website. Could you please advise?
Hi Nelson,
Another fantastic tutorial – thank you very much.
Could you please help me display the word ‘Menu’ next to the menu icon properly?
The code I’m using at the moment is:
.et_mobile_nav_menu:before {
content:’MENU’;
font-family:Neuton;
font-size: 1.3em;
color: #24839e;
margin-right: 5px;
}
.
Hi Laszlo,
The URL the you provided already has the Menu text besides the hamburger icon so I am assuming that the query is resolved now.
Let us know if you need any further assistance.
Hi, I am managing a website and tried implementing your code.
When I use the inspector on the desktop and look at the webpage in mobile view, everything works perfectly.
When I actually open it up on my phone, none of the arrows show up making it impossible to access any submenus. Any idea what could be going on?
Hey Thomas,
I tried opening the website on my phone and I am not able to replicate the issue that you are facing but if you want to move the arrows to the left a little then you can use the code given below:
#access > .menu ul li > a:not(:only-child) span:after{
right: 20px !important
}
Increase the right property value to move the icons to the left.
Let me know how it goes. 🙂
Got same issue. When resizing the browser on desktop all showing fine as it should but on an actual mobile device the toggle icons are not available? Thanks in advance for any tips.
https://jmh.irenesoler.com/
Hey Irene,
It is working fine on my end. Could you please remove the cache from your device and check again?
Hi Nelson,
Love your tutorials!!
I have a question; Is there any way to make this work on desktop?
I have a page where I would like to keep the menu showing as a regular menu (not in a hamburger menu), but I would like to have the collapsing effect.
I have three menu levels ranked this way: Products(main menu) -> product categories(sub item) -> and lastly the product itself (sub sub item)
Is that possible? 🙂
Hi Kristina,
Could you please share the URL of the website for me to investigate further?
Great tutorial. But in some cases the collapsable icon not looking in right way. So my suggestion is that remove the font-family: etmodules then put ‘+’ and ‘-‘ sign accordingly.
Sure, if that works and suits you that is fine.
The content for the toggle arrows is set to nothing in your code … Thus, showing no arrows.
content: ”;
When I set mine to…
content: ‘\32’; (for when open)
content: ‘\33’; (for when closed)
then it it worked.
Also for the top hamburger to show an x I had to use this:
content: ‘\4d’;
not
content: ‘d’;
Hi John,
I’m not sure what you mean, everything you mentioned is definitely correct on our site.
I noticed the same as John Nelson, in your CSS above you have content: ‘d’; for changing the hamburger icon to X, and lower down content: ‘ ‘; where an ETModule code should be (e.g. content: ‘\4c ‘;), S
I don’t understand, it is clearly showing fine on my end. I’ll try to find out why this discrepancy.
Nelson, See this screenshot of your code above… there is nothing in between the apostrophes for the content of the arrow toggles.
https://snipboard.io/wt6SCd.jpg
Thanks, the developer of the Divi Code Snippet module is looking into this. On my end it shows 🙂
This should be fixed now! It was a caching conflict.
Hi Nelson,
Is this still working? It does not seem to work for me. I am using Divi ver 4.12
Thanks
I didn’t test that specific version but I am sure it is working.
Just a small issue Nelson, but I am finding it increasingly annoying because I can’t solve it myself – would you mind suggesting where can I add a Z-index property that will ensure the mobile menu dropdown overlays the WooCommerce image zoom icon on a product page, for example: https://hawaiian-shirt-shop.co.uk/product/san-souci-mint/ – many thanks in anticipation
Hi Sarah,
Go to the Divi > Theme Options > Custom CSS Panel and place the code given below:
a.woocommerce-product-gallery__trigger {
z-index: 1 !important;
}
Let me know how it goes. 🙂
Hello, I copied and pasted the code but it doesn’t appear the point on top of the menu submenu in mobile and desktop. The submenu appear without round corner in mobile and desktop.
My website is http://www.ayudaadomicilio.pe
Hi Percy,
I think there is some confusion, what you described is not part of this tutorial. Please check our other tutorials for specific things like that: http://wordpress-292293-1617718.cloudwaysapps.com/category/tutorials/divi-menu/
Hi Nelson,
This code is part of this tutorial. It is the first time that you use this code for mobile but it doesn’t work.
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: ”;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
Hey Percy,
Could you please share the URL of the website for me to investigate it further?
Hello! Really appreciate your excellent tutorials – so helpful!
For this one, I’m wondering the best way to modify the css to allow the nav link text ALSO activate the dropdown just as the icon does? I hope that makes sense. It seems intuitive to me that many/most? people would click on the text to cause the dropdown to activate, rather than the icon off to the right side.
Thank you in advance if you’re willing to help!
Hey Randall,
We are working on this extension and will get back on this shortly.
Hoping you can help. I have read through all of the comments but still have a problem in this site: https://njfireems.com/.
I did not use the Theme Builder Header, just the Theme Customizer. The parent menu item do not have links. On mobile, I want them to be clickable to expand just like the caret symbol.
Can you help?
The post has been updated, so please indicate if you have done that.
Yes, updated all code but it does not seem to work. Not sure what I’m doing wrong. Can you help?
Hey Kelley,
I check the URL and I am unable to see the submenu items so could you please elaborate the issue you are facing or am I missing out on something?
Just to add… I tried on another site too with same result. I simply want the parent menu item to act the same way as the caret; i.e. to expand the menu when clicked, just like it expands the menu on hover for desktop.
Hey Vladimir,
I have checked the website and it works perfectly fine on my end.
Darn… replied twice and my first one disappeared! Just wanted to say that I am still having trouble perfecting this.
I tried on another site too with same result. I simply want the parent menu item to act the same way as the caret; i.e. to expand the menu when clicked, just like it expands the menu on hover for desktop.
Please help! This will be an awesome solution if we can get it to work.
Thank you for this tutorial. I added the code to my site successfully with one glitch. The first time you click the menu, the arrows don’t appear. You have to close and reopen the menu fir them to appear and for you to have the ability to expand the submenus.
Would you be able to help me identify why?
Site: anaturalcuriosity.org
Thank you!
Hey Colleen,
The jQuery code is getting delayed somehow. I guess it’s happening because of some setting in the Performance Tab that you are using. Please try disabling the jQuery defer or delay if you are using and see if that helps. If some performance plugin you are using so try deactivating that as well and see where this delay is arising.
Let me know how it goes.
Hi I’m having an issue where the toggle inherits a menu icon. The submenu also inherited the icon but i was able to block it ” #menu-item-5901:before {display: none;} “. The icon appears to the left of the toggle. How can i stop this? https://emeralderin.com/sample-page/. Thanks for your tutorial!
Hey Kristie,
On the URL provided, I cannot spot the icons in the submenu. Could you please check it in incognito mode and see if that helps?
Let me know how it goes.
Hi I tried, your optional code.
it doesnt work when the parent element is click it doesnt show the sub menu.
do you have a full tutorial ?
or did I miss something .
also do I need to just add the optional : Jquery and CSS ?
Or replace your provided JQUERY and CSS completely ?
thank you so much
Hey mv,
Could you please share the URL of the website for me to investigate further?
Hi, I have a similar question to the comment above.
Your additional option of “Use Parent Menu Item As Toggle For Submenu” is exactly what I am looking for. However, you do not clarify how I am supposed to apply it. Should I keep all the previous Jquery and CSS from the first option and add the section option code to it or delete all of the first option Jquery and CSS and just use the code you have for the second option (hope that makes sense).
Also, for the second option Jquery, I don’t see . I assume this needs to be added in? Not sure if it was intentional or not for leaving it out.
Hi, I have a similar question to the one above.
Your optional code to use the parent item for toggle is exactly what I have been looking for but I can’t get it to work. The submenu is hidden but when I click the parent menu, the entire menu collapses.
Am I supposed to use both Jquery and CSS from the first option and the new option or just the Jquery and CSS from the new option?
Hey Evan,
You need to use the code given below which you are referring to as a new option. I have placed the jQuery code in the console of your website to check whether it’s working fine or not and it’s working completely fine on my end. Please copy the jQuery code from this comment and see if that helps:
jQuery(document).ready(function(){
jQuery(".et_mobile_menu .menu-item-has-children a").each(function(){
jQuery(this).click(function(event){
event.preventDefault();
jQuery(".et_mobile_menu").toggleClass("pa-block");
jQuery(this).siblings("ul").toggleClass("pa-submenu");
})
})
})
Let me know how it goes.
Hi Hemant,
I was looking to use the optional code and I can’t get it to work on my site. The parent item just seems to close the whole menu.
Thanks in advance 🙂
Hey Cameron,
I have investigated your URL and I cannot see the submenu items in the menu. Could you please let me know if I am missing out on something here?
Greetings
Thanks for the code, it worked perfectly but it got an issue when using icons in menu, it duplicates the icon of the menu item that got sub menu, the duplicated icon will be attached near to the arrow icon.
The code needs some modification so it can work perfectly with menu’s that got icons.
Hey Ahmed,
I cross-checked the code on my end and I am not able to replicate the issue that you are mentioning. It would be great if you please share the URL of the website for me to investigate further.
Hey Hemant,
Please check following demo page https://bit.ly/3BcVAgt
You’ll find that there is a duplicated icon in the menu item that got sub menu. (Mobile Menu)
Thanks
Hey Ahmed, please use this code and let me know how it goes.
@media all and (max-width: 980px){
.ld-menu-account a:nth-of-type(2):before{
display: none;
}
.ld-menu-account a:nth-of-type(1):before{
font-family: 'ETMODULES';
content: '\e08a';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #2ded30;
font-size: 1.3em;
transition: all .3s ease;
}
}
Hi,
Is there a way to make only one submenu open at a time?
Thanks!
Can you clarify what you mean?
i think the idea is if anyone open any submenu then another opened submenu will automatically closed.
Optional jQuery and CSS is not working and I need to do that !
Can somebody help me?
This isn’t working for my either. Did you find any solution?
Hey Thomas,
We are working on the issue and will get it fixed.
Hi there Nelsen! Thanks you so much for this awesome tutorial http://www.unipiazza.it
Could you give us a check? <3
Thanks a lot from Italy!
can i make this menu fullwidth ?
I don’t think your question is related to this post.
This code saved my bacon! Thank you.
One question – when I do a search on my site on mobile, and land on the search results page – THEN go to the menu again, all of a sudden all of the submenu’s are expanded and because I am using a sticky header, I am unable to scroll to the bottom of my menu.
The sticky header isn’t an issue when only one of the menu items is expanded at a time, but this reaction is opening all of the sub menus automatically. Any help is appreciated!
Hey Malia,
I have tried to replicate the issue on my end but everything seems to work fine for me. Could you please try using a different device or browser and see if that helps?
Hello, I am trying to use the “Use Parent Menu Item As Toggle For Submenu”, in combination with your full screen mobile menu. Not sure if there is some sort of code conflict here? I’ve included the jQuery and CSS but it doesn’t seem to work. Thank you for your time.
Hey Jon,
I have checked the website and everything is working fine on my end. Could you please check it on a different browser or device and see if that helps?
I tried viewing it in Chrome, Firefox, and Edge, and still no luck. When I click a parent menu item (ex: Residential), it just closes the menu instead of expanding the dropdown. Actually, I removed the jQuery temporarily as it seemed to make my hamburger menu unclickable for some reason. Could you test things on your end? Thank you!
Hi Nelson. This works great on the main Divi menu, but for some reason, it doesn’t affect the Menu Modules. Specifically, the mobile-toggle is not appending to the li.They use the exact same classes you are targeting in your tutorial. Any thoughts?
Hey Dan,
Could you please provide the URL for me to investigate on this?
Hei Nelson
Thank you for the tutorial. Now the menu feels and works better : )
Is there a way to animate the expansion of the sub-menu items after click?
So it works well with the animation of the main menu when hamburger is clicked, expanding gradually?
Hey Jozef,
Could you please share the URL for me to investigate further on this?
Sir could you please send html file attached to this code?
I’m injecting it manually and i want to read the code by lines
Hey, is it possible to make it only target second child sub menu?
so that the first set of parent menus are still folded out but the second level is collapsed?
e.g this website silent.offbeatmedia.dk i would like the children of “koncepter” to be visible while they are kollapsed themselves 🙂
Hey Tobias,
We have never tried this approach but will do it and get back to you with the ideal method.
Hello Nelson!
This tutorial worked perfectly before, I’m using Divi 4.0.3. It’s all thanks to you!
But then, when I updated my Divi version to 4.14.7, everything just didn’t work.
The submenu is not displayed, the toggle button to open the submenu is also not present.
In other words, the submenu became completely non-existent on my site.
Hey Nels,
I have checked the URL provided and it works completely fine on my end.
Hi Nelson, thanks again for a great tutorial. I got the toggles version working, but I am trying to use the parent toggle version. For some reason I can’t get it to work. I am not using top level pages but custom links with # as the URL, so I don’t know if that makes a difference. Here is the link – http://georgiospizza.tbgl.net. Thanks for any assistance you can provide!
Hey Brian,
The URL that you provided is leading us to a 404 error. Could you please provide a valid URL in order for us to investigate it further?
Hi Hemant, thanks for checking in. I eventually figured it out and launched the site so that link no longer works.
Hi again, I think my last comment didn’t actually go through I apologize. Thanks for this great tutorial. I have this working except for the parent links. They just close the menu instead of opening the submenus. The toggles are working, however. Thanks!!
Hey Brian,
I am not able to access the URL provided, could you please check it and place the URL again in order for me to investigate it further?
Hello Nelson!
I have a client that wants this same effect on a desktop menu – meaning that a 2nd level submenu slides down inside it’s containing menu, instead of the standard flyout (to one side or other). I’ve tried adapting code to make it happen, but just can’t get it to work. Any ideas? New tutorial maybe? Thanks for all you do!
Hey Matthew,
We will definitely work on this and will get back to you with the ideal solution.
Hello,
the additional function for “click for parent menu” is not working. I just added the css and script (head integration) to the other codes with no effect.
is the code up to date?
Hello,
the optional script and code is not working (anymore?).
any idea whats going wrong? seems like a lot of guys has this problem.
best regards
Hey Janik,
We have checked the code and you are right, we will update the code inside the guide as soon as possible.
Is it possible to only collapse 2nd child menu?
Like if i have a menu where a top level says companies, then under that i have e.g b2b as one point and b2b as another point.
i would like to see both those when opening the menu, but i would like to collapse those so the 5 points under both 2b2 and b2c are hidden.
Hey Tobias,
We haven’t tried it yet but we will try and let you know as soon as possible.
Hello. Code is great for 1 language. I have a multilanguage with 4 languages ( WPML ). On main language is ok.
On other languages not working. How to solve this
Hey Aleksandar,
I am assuming that your question is different from the post you have commented on as it doesn’t matter in how many languages the website is being translated into, the codes are written in jQuery and CSS which stays the same throughout.
Hello, good day, I wanted to comment, I used the code and it works perfectly, except for a small problem, the menu appears only on the pages but it does not appear on the posts, I am using the divi constructor to apply a sidebar in all the posts, I don’t know if that’s the problem, but before adding the code that didn’t happen, any solution, thank you very much
I’m not sure what you mean, our code would not hide the menu on posts.
very helpful! thanks so much for making it straightforward and simple!
Hey just wanted to let you know how much I appreciate you posting stuff like this. Worked like a charm! THANK YOU THANK YOU THANK YOU!!!
Hey KC,
We are glad that you are liking the stuff we post. 🙂
Thank you for this post. I have a large menu. My issue is I can’t scroll down the mobile menu. The scrolling action scrolls the page beneath the menu, but the menu is static. Any help is appreciated. Thanks.
Hey Kim,
Could you please provide me the valid URL of the website for me to check the menu and fix this issue for you?
Hi
Great tutorial 🙂 – it works a treat on my site except for the fact that the parent menu text becomes invisible when I expand the submenu toggle. The text only re-appears when another menu option is selected. Just wanted to check that there was nothing in the code that I have missed that would cause this effect. I’m using a Global Header but can’t see anything in the Menu module options that would cause this so just wanted to check nothing in this code that would be the issue.
Thanks
Lee
Hi Lee,
I am not able to spot the issue on my end. Please let us know if it’s fixed already.
Parent Menu Item doesn’t work at all.
I see many complaints about that, but there is no real solution.
I noticed some bugs in the javascript code, but nothing didn’t help.
Can author of this code try this again and post again solution and fix?
Thank you.
Hey Igor,
Could you please share the URL of your website? I am checking the issue myself and your website URL will help me try the updated code in different scenarios for ideal results.
Hey. Thanks for your help.
It works for me but i just have a problem about it.
when i place codes on their places it will only works once. I mean i place code. use dropdown and click on one of my categories and after that dropdown button is not there. not even in the home page of my website.
Will you please help me out on this one?
Very appreciated for all your efforts. 🙂
Hey there,
Could you please share the URL of the website for me to investigate it further?
Hi Nelson
Placed my previous comment at the wrong post earlier. Hence this additional input to making the Parent MEnu text being clickable
Add this to the CSS style sheet
@media (max-width: 980px){
.tippy-popper {display: none !important;}
}
Thanks for sharing, will try this on my next project.
Hi, thanks a lot for sharing. We placed your code on our website (still development) And it doesn’t work on the HomePage, but it does work on all subpages.. Any idea? This is the (test) URL https://new.artiled.nl
Hey Michel,
I have checked the URL provided and according to my analysis, there is some custom code or the plugin that is being applied on the homepage and conflicts with the code. Could you please try deactivating the plugins or removing the code present on the page other than the code in the guide and see if that helps?
Let me know how it goes.
Hola Nelson, lo primero felicitarte por tus enseñanzas y darte las gracias por todo. quisiera comentarte varias cosas me puedes indicar como modificar el hover (que css necesito) de las distintas categorías del menú desplegable.
por si te sirve he visto comentarios que el menú desplegable al ser muy largo por tener muchas categorías no hacia scroll, lo resolví poniendo en el modulo del menú tanto en la sección como en la fila y el mismo modulo/// scroll to top / sticky limit / body area
Hey Roberto,
It would be great if you ask the query in English as it would be easy for us to understand.
Thank you, thank you, thank you! You are the best!
You’re welcome, Kim!
Hi Nelson,
thank you very much for this solutions and for all others you share.
I have a problem though with the arrow icons which do not want to show up on my website. I checked on all browsers and on a few devices but I cannot solve it. I read all the comments on this thread and tried all the solutions/suggestions … and still nothing. Can you please give it a look?
The website is https://www.dyslexicadvantage.org/
Thanks!
You can try going to Divi Theme Options>Performance and turning off the Dynamic Icons setting, that should solve it.
Thank you for your quick response Nelson.
I turned them off but no change.
Any other hint?
Thanks!
I’m afraid I don’t know, that should have solved it.
Thanks anyway!
Hello, thank you for this code! Worked perfectly– is it possible for the submenu to open and close with a sliding effect? Thank you so much..
Hey Sarah,
Could you please elaborate on the sliding effect, like from where you want to start and end the sliding?
Hi Nelson,
Very nice code!
I do not want to use Parent Menu Item As Toggle For Submenu (only the arrow)
I have integrated the first Script but when you click in Parent item it’s opening the toogle and it isn’t bring you to the url parent Page.
Thanks in advance for your help 😉
Best regards,
Emmanuel
Thanks so much for this tutorial Nelson. I have a custom link (without a link) for the parent menu (similar layout to the menu on your site). Is it possible for the sub menu to open when you tap the parent menu item as well as clicking on the icon? Right now when you click on the parent menu, the entire menu closes. It doesn’t feel like a good user experience for this to happen. I never even noticed it before but one of my clients pointed this out. This is the site I’m working on – http://box5402.temp.domains/~rojecttg/
Hey Nay,
The URL you provided is not working, could you please provide a valid URL for us to investigate further?
I have this same exact question. I’d love for the parent menu item (not just the button) to open up the submenus. Could you help?
Thanks for the help.
Hi Stephan!
We have updated the CSS code to make the sub menu on click of parent menu items. Please follow the guide under the header Option: Use Parent Menu Item As Toggle For Submenu.
Hi,
First of all, thank you very much for this great tutorial!!! I like it!!!
My only problem like many is that the Option: Use Parent Menu Item As Toggle For Submenu doesn’t work. I try the code but it didn’t work.
I can see that others have the same problem. Someone fixed it here:
https://divi.help/threads/make-parent-menu-item-behave-same-as-toggle-to-open-submenu-on-mobile-menu.9633/
He says:
“I figured out the solution by manually adding/removing the open/closed class. I replaced the preventdefault with this line of code:
$(‘div.mobile_nav’).removeClass(‘closed’).addClass(‘opened’);”
But i’m not sure what he meant??
Your help will be much appreciated.
Best Regards
Hi Marc,
I have a really simple solution:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
width:100%;
text-align:right;
}
I’m having trouble with this and mega menus unfortunately. Normal dropdowns work but mega menus fail to open and there is an error in the console that reads Cannot read properties of undefined (reading ‘slice’)
Hey Ben,
Could you please share the URL of the website for me to investigate it further?
Thanks, but I had a bug! After I put the code the three line icon (humberger menu icon?) is on aligned to the TOP and the search icon is aligned in the middle. It’s not nice to see it. Do you know how to fix it?
No I don’t know, would need to see a link to try 😉
Hei Nelson
Thanks for the tutorial,I just wanted to know how to Increase the size of the Divi Menu Dropdown Width.
Do you have a css u could share.
Best Regards
Hey Graceson,
This can be achieved using the CSS and there is no default way in Divi to do that. Please share the URL of the website for me to write the code for you.
Thanks so much for this tutorial! The menu displays perfectly on mobile, but clicking on the arrows does nothing and I cannot open the submenus. I copied and pasted all the code above, so I’m not sure what I’ve done wrong. Help!
Hello,
Your code works great. Although I only see the icons when i’m logged in and they don’t appear when I’m not logged in.
It seems like the class=”mobile-toggle” isn’t loading. Any idea how to fix?
Nevermind, I got it working.
Added the jQuery code in the script.js file in my child theme instead of the integrations tab.
Hey Mario,
Glad to hear that the issue is resolved.
Hello! thanks for the code. how can I remove the white triangle? see screen shot
https://ibb.co/m0PL0pX
Thank you
That’s from another tutorail about adding the point on top, you can remove the code you added.
Hello Nelson,
I love what you do man! Amazing tutorials that make things look better!
Thank you so much, thank you!
Have a great day!
You’re welcome Duarte, glad you like the resources!
Hi Nelson, thanks for this tutorial that I like very much. My problem is that it doesn’t work if I have the Siteground optimizer plugin active! When this is disabled it works. Can you help me please? Thanks
Hi Cristina!
Please try disabling the Minify and combine CSS option in SG optimizer plugin and check again.
Hi there,
Amazing site with a lot of very helpful code. Regarding this sub menu code, I can’t seem to find the CSS that would allow me to increase the size of the toggle.
Thanks for any help you can provide.
Cheers,
Wayne
Hi Wayne!
It seems you’re referring to the toggle icon font size. Please try the following code:
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
font-size: 30px;
}
Let me know how it goes!
Hi, great tutorial, it works, but I have an issue… I used your solution, but each time I try to open the submenu, before than opening the sub-items, it closes… and after, I have to open it again! I would like that it keeps always visible, during opening / closing the sub items…
thank you for your kind help!
Hi Caterina!
I’m not sure exactly what is causing the issue. Could you please share the URL of the website for me to investigate it further?
Hey there! When adding the code it makes all of my hero sections and headers have a gap at the top. I remove the CSS, nothing changed, but when I remove the jQuery and it goes back to normal. I am baffled.
Hey Aunia!
I’m not sure exactly what is causing the issue. Could you please share the URL of the website for me to investigate it further?
Hi Nelson, thanks for the code. I got one of my problems fixed: the drop down now has the main headings in the mobile view. But I can’t see the toggle to see the sub-menus under those main headings. How do I fix that? Thanks!
Hey Kelly!
Could you please share the URL of the website for me to investigate it further?
Hi Nelson, thank you for the code, it indeed collapses the menu. However I cannot see the icon to toggle to see the submenus on the website. Coudld you help me troubleshoot that please. The site is https://missionhomeremodeling.com/ Thank you so much
Hello Douglas!
I visited the website, and the mentioned code is not there. Could you please go through this article step by step?
The code above works well when I added them using the inspect option. Please look at the image below:
https://prnt.sc/ZG-Qv8zrxiKk
https://prnt.sc/AAjJtPtmV69R
This worked beautifully and very grateful for the code.
Thank you kind internet person.
You’re welcome James! Hope you enjoy all of our resources!
Hello,
The arrow that allows you to see the submenu only appears on my home page for mobile. When you go to any other page on the site, then click the menu, my parent menu item “Commercial Energy Programs” no longer has a drop down. Again this is only on mobile.
My site: https://consumerenergysolutions.com/
Hi Oriana!
I checked the website, and everything is working fine. Please look at the following screenshot:
https://prnt.sc/0zs9PEao9w1L
https://prnt.sc/Go-zsmaefQ4n
Hello,
Firstly, thank you for this. It’s very help and on the whole works very well.
I do have one slight issue though and wondered if you could help.
On our site, https://www.raisingfutureskenya.org.uk/ the menu now works well on the mobile home page and displays the toggles. But if I visit one of the toggled pages the mobile menu changes and no longer shows me that the toggles are available. Do you know why this might be happening and how I can change it so the menu works on all of the mobile pages as well as it does on the home page.
Thank you,
Sam
Hi Sam!
I’m able to see a jQuery error in the console for the other pages which seems to be conflicting with the Menu script. Can you please check again by removing all the other scripts except the collapsable menu one from Integration tab and disable all the plugins manually?
Hi Nelson,
Great tutorial, as always. Thanks.
But:
For the first time, I have not been able to get the snippet to work.
If you put the JS code in Divi>Theme Options>Integrations, it works fine.
But if you put it without in the scripts.js file, it doesn’t work.
Maybe I’m doing something wrong with the location of this file.
Where should it be?
Should it be placed in the JS folder in the Divi child theme?
Or just put it along with style.css in the root of the child theme?
Hi Eugene!
The issue seems to be loading of the JS file on the site which could happening due to Divi performance options or Cache plugin. Try disabling them and check again. If the issue persists, contact the Elegant themes support.
I loved the tutorial! I have one small problem with the nav bar on my mobile. For some reason, my main menu items that have submenu listings turn completely white when clicked on mobile. Only my Services and Consumer products sections turn white like this. If I can get any help I would greatly appreciate it! Thanks
.et_mobile_menu li a:hover {
opacity: 1;
background: #88c645;
color:#ffffff;
}
.et_mobile_menu ul.sub-menu a:hover {
opacity: 1;
background: #88c645;
color:#ffffff;
}
Hi Daniel!
Please try the following code and see if it helps:
.et_mobile_menu li a:hover {
opacity: 1;
background-color: #88c645 !important;
color:#ffffff;
}
.et_mobile_menu ul.sub-menu a:hover {
opacity: 1;
background-color: #88c645;
color:#ffffff;
}
Hi,
thanks for the tutoiral. Has so far worked great.
One more question. It would be good if the dropdown menu also opens when you click on the menu title. I thought this works with the code under “Option: Use Parent Menu Item As Toggle For Submenu”. I added the code in addition to the other one but unfortunately it has no effect. When I click on the menu item the complete menu closes again. So the dropdown opens only if I click exactly on the arrow.
Do you have any tips on how this could work?
Translated with http://www.DeepL.com/Translator (free version)
Hi,
thanks for the tutoiral. Has so far worked great.
One more question. It would be good if the dropdown menu also opens when you click on the menu title. I thought this works with the code under “Option: Use Parent Menu Item As Toggle For Submenu”. I added the code in addition to the other one but unfortunately it has no effect. When I click on the menu item the complete menu closes again. So the dropdown opens only if I click exactly on the arrow.
Do you have any tips on how this could work?
Hi Seb!
Thank you for bringing it to our attention. For now, to make the whole parent menu item to open sub menu toggle:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
width: 100% !important;
text-align: right !important;
}
Let me know how it goes!
Hi Nelson,
I really enjoyed this tutorial, the main code works wonderfully (replacing a hefty plugin that was conflicting with others!)
My only problem is that the JS for “Use Parent Menu Item As Toggle For Submenu” doesn’t seem to be working for me.
Could you take a quick look for me?
Hi Tom!
Apologies for the trouble. There was a little syntax error in the code. We have corrected it. The script should work fine now. 👍
Hi. I tried the parent toggle code today and it doesn’t seem to work. Please take a look and thank you! https://rainbowplays.com/
Hi Brian!
Thank you for bringing our attention to the issue. I have updated the code above. Please use the one and see if it helps.
Really helpful tutorial!
I have only one problem, we have menu – sub menu and “sub-sub-menu”, sub-sub-menu shows expanded by defult and can’t collapse it, do you know why?
Here you can check it: https://imgur.com/a/KCfmfhB
The way to change the dropdown menu line (or border?) color at CSS is: border-top: [color] ?, the only way I know to change is to select the colour at Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Dropdown Menu Line Color.
Hi Emaux!
We are glad that our content helps you with your website. Coming onto the issue, for our better clarity could you please share the URL of the website for us to investigate further?
Hi, thanks for this helpful tutorial!
Is there any way to collapse the sub-sub menus? Parent and sub menu collapses perfectly, but we have 3 levels in our menu, the 3rd level does not collapse 🙁
Hi Richard!
The code works fine with every level of the mobile menu. Maybe the menu you’re using is customized in some way, could you please provide the URL of the page for me to investigate further?
The tutorial doesn’t work when menus contains 2 or more levels…….
Hi Patrick!
Can you please share the URL of the page so that I can check further?
Hello and thank you for the tutorial.
I applied the directions and managed to get the result I wanted. However, I noticed that it is only applied to the first submenu level.
In fact, if there is a second submenu level, the rule does not apply and the menu then becomes very long.
Could you help me so that the second level is also closed and only opens on click?
Thank you.
Hi Francesco!
Can you please share the URL of the page so that I can check further?
Hi Nelson, thank you for this tutorial. It is great and really helpful, after searching for the solution on the internet for 2 hours I found it and I love it.
But I am facing an issue which is, whenever I open my website on mobile by default this menu is expending (opening without clicking)
Could you please help me?
I am not sure about that, sorry.
Hi Nelson,
thanks for the wonderful code! I implemented it on our site https://fsmed-muenster.de – works great under Chrome/Edge but under Firefox I can’t get the icons for expanding and collapsing the sub menus to appear … we are also using W3 Total Cache, but after deactivating the plugin you still have to refresh the site every single time to get the icons to appear – do you know any solution to this?
Best regards
Maurice
Hi Maurice!
I have checked the page in Firefox and not able to replicate the issue. Can you please try disabling the minifying and combine JS and CSS options in the cache plugin and check again?
Hello,
First thanks for the well explained and useful tutorial – great job.
I have only one problem. I wrote all the comments and tried everything nut nothing helped. At the moment the code for Use Parent Menu Item As Toggle For Submenu is not added as it doesn’t work.
The problem is that when I expand the submenus and click on them it doesn’t open the link. Instead it only changes the close menu icon back to hamburger. It even doesn’t closes the menu.
This i s the web page: https://investinbansko.com/
Hi Boris!
We have updated the code now. Please copy the updated code from above. The parent menu item should expand fine now on click.
Works perfectly and this saved me so much time. It would have taken me forever to figure this out. Thank you so much!!!
Awesome to hear, you are welcome!
Hola Nelson,
I have had this code working for a long time, but I have always tried to tweak it so that the Click on the word that accompanies the arrow works, but I have not succeeded.
Do you have any idea how to fix it?
Thank you so much!
The website is https://strands.com
Hi Juanma!
Please add the following code for the fix:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
text-align: right;
width: 100%;
}
Let me know if it helps!
Hemant, thank you very much.
It works perfectly!!!
I had not thought that the solution could be in the css and I had been fighting with the js.
Thanks again
Love this tut, thank you. How would I customize your JS so that I could add a sexy slide to the toggle? This toggle is such a jerky motion downward.
I’m not sure, unfortunately that would be a separate topic.
Hi Nelson, great work! Can you tell how to adjust the toggle speed to get a smooth transition? CSS Transition is not working on display: none; element, so it has to be adjusted in the java code adding time and easing somewhere?
HI Maik!
I’m afraid changing the transition of the toggle sub menu needs hard customization. Yes, it can be done using JS. We’ll check further and update the guide. Stay tuned!
I freshly copy and pasted the JQuery and CSS just now, but my site on mobile doesn’t have an arrow you can click on in order to see the submenu items.
Is there something I did wrong?
Site: https://consumerenergysolutions.com/
Thanks!
Hi Oriana!
I’m not able to find the CSS code in the source code. Please make sure it is added properly.
I am having the exact same problem. I have actually used this code multiple times in the past. I came back to copy it for a new site and the dropdown is there on desktop, but not on tablet or mobile breakpoints. I even copied & pasted it three times and still not having any luck.
I think this was asked before but never answered on thread. Is it possible to have the sub-menu’s be animated slowly just like the main mobile menu on click?
thanks
-sean
It’s very difficult to change the speed of JavaScript that is already set in Divi, so I don’t have any solution for you.
What an incredible time saver. You are fantastic!!
I’m so glad you like this!
Hi Nelson,
Thank your for supporting me and the divi nation with your well explained and useful tutorial – great job!
Also this mobile-menu coding works (almost) perfectly! But I have one issue: if the parent item is clicked instead of the arrow on the right side then the hamburger menu will close. How can I avoid this?
URL: https://bsvweinfelden.ch/wordpress/
Thanks for your help
Adrian
Hi Adrian!
I have checked the issue on “Mannschaften” menu item and not able to replicate the issue. The toggle is working fine when clicking on the menu item. Is the issue resolved?
Hi there, is there a solution for submenu’s under submenu’s. It doesn’t seem to work like with this code.
Hi Kai!
The submenu under the submenu’s should work fine. Can you please share the URL of the page so that I can check further?
Hello Nelson I apply the code for Use Parent Menu Item As Toggle For Submenu, and works great thanks for that but I have several menus on my site and I like to Appli just in #mobil_menu1 I edit the jquery and also the CSS but is still working in all the site now I use media query because I using also the tutorial for the widget menu, so can you help me width that?
If you mean apply this to a specific menu, yes you can do that with the Menu module, but not with the default menu.
Hello Nelson,
I don’t know how you manage to provide such a lasting support for a free tutorial. You are really a great help for the DIVI community. Thank you so much.
Well I’m asking for your help too with a small question about a problem with this tutorial : child menu items are not clickable
https://artbatiz.fr/
Hi Romain!
I have checked the page and the submenu items are working fine now. Is the the issue resolved now?
Hello,
Thanks for the article, I have implemented the above code and it was fine, but when I create a child theme, the two icons are showing but on the main theme showing only one icon.
Please suggest.
Hi Bhanu!
Can you please share the URL of the page so that I can check further?
Hi,
I’m using this in combination with your tutorial: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-open-a-divi-menu-submenu-by-clicking-instead-of-just-hovering/
But now the sub menu isn’t opening?
You can view it at https://ijssel.ecdjdemo.nl password is zuiver
Hi Ernst!
I have checked the page and the desktop sub-menu are displaying fine on click on parent menu items. If the issue persists on your end, please clear the browser cache.
Thank you for this tutorial but I am having 3 issues:
1. When I click the parent menu item instead of the icon it closes the whole menu.
2. I changed the color of the toggle in the css but it does not reflect on the menu in any browser.
3. I have sub-sub menus and they are automatically opened with the parent it clicked, rather than allowing a user to open them via the toggle.
I have cleared cache in divi and and my browser and have tested in safari, firefox and chrome. Please help!
Hi Jillian!
Can you please share the URL of the page so that I can check further?
Hi! First of all: Awesome blog, so helpful in many aspects.
I lust applied your code. Works like a charm. Is there a way to unfold the next level also when clicking on the text? Right now, it only works when clicking on the icon….
Hi Tom!
We have provided the codes to open the submenu when clicked on the parent menu items. Please follow the script and CSS under Option: Use Parent Menu Item As Toggle For Submenu heading in the guide.
Hi Nelson,
Thanks for sharing your solution. There are a lot of people looking for one that works dependably and your original CSS and jQuery is perfect!
I tried adding the optional CSS and code and the menu was blank. I solved that by adding display:block to your .opened class and everything became visible. Unfortunately the links are dead on the sub-items in the menu in addition to their parent buttons. I believe there may also be an issue with opening and closing the menu with the optional add on.
I had to remove the option but would love to use it if you circle back to it and get it working.
Thanks again for a great solution Nelson.
Glenn
Hi Glenn!
I have checked the code and there is no issue with it. The code must get conflicted with any other code on your site. If you still need help regarding it, please share the URL of the page to investigate further.
Hi Nelson,
I’ve been using these menu tutorials for a while and they always worked perfectly! I noticed a few days ago that the toggle on mobile was gone. I’ve checked all the codes and even deleted them and added them again. Afterwards the toggle is back again, but now when I open the first submenu, all the submenu’s underneath that one are open as well and I’m not able to close anymore. The toggles stopped working. Do you have any idea what my problem would may be?
My link is: https://travelwithsimone.com/
Hi Simone!
I can see the following script is also added which is not from our guide and causing the conflict with our codes. Please remove it and see if it helps.
setTimeout(function(){
jQuery(document).ready(function(){
jQuery(‘li.menu-item-has-children’).click(function(){
if(jQuery(‘li.menu-item-has-children’).hasClass(‘dt-open’)){
jQuery(‘li.menu-item-has-children’).removeClass(‘dt-open’);
jQuery(‘li.menu-item-has-children .sub-menu’).removeClass(‘visible’);
jQuery(this).addClass(‘dt-open’);
jQuery(this).find(‘.sub-menu’).addClass(‘visible’);
}
});
});
},500);
hey, thanks for providing such a function. I translate with google, hope you understand everything.
unfortunately I have a problem. The “collaps mobile menu” does not load every time. from time to time only the categories without sub-items and without arrows are displayed.
It just worked for a while, but then I updated the page and then it didn’t work again.
please check my page:
happyshrimp.de
Hi Andreas!
I’m not able to access the page due to the maintenance mode plugin enabled. However, please try clearing the plugin cache or even disable the cache plugin and check again.
Let me know if it helps!
Hi!
Can you please tell me how can I get the top right corner arrow and the X button removed?
Thanks in advance.
Hi Yen!
I’m not able to understand which arrow you’re referring to. Can you please share some more details?
Hello, I’ve been trying but I don’t get the buttons on mobile, but they do on the web when I reduce to mobile size.
I can’t get the buttons to show the submenus
http://www.intitrek.pe
Hi Miguel!
I’m able to replicate the issue on mobile devices. However, nothing can be seen while inspecting the page. Try disabling all the plugins and check again.
I had the exact same issue and I think I found the culprit: ACF by WP Engine. Kind of a bummer since I have all my custom posts and fields created with it. I wonder if there’s anything that could be tweaked in the jquery or css code since just thinking about getting rid of ACF at this point makes me cry. Anyway, this is probably too much to ask I know but just thought I’d share my experience!
Hi Florencia!
Thank you for sharing the plugin with us. We’ll test the customization with the plugin for the issue.
Hi I have set up the menu as per your instructions it all looks great only have one small issue it now says Menu above menu in the text and has created a section section
Hi Jodey!
Can you share the URL of the page to investigate further?
Hi Nelson! I’ve been using this code on many sites and I never had an issue until now. Strangely, everything works perfectly on my site pages but on posts (either built in or custom) it doesn’t. The toggle icons are just not there. I’ve been trying to troubleshoot for a while and even checked with Divi as I’m using the same global header for both pages and posts but so far no luck finding the answer. If someone in your team could take a look, would really appreciate it!
Hi Florencia!
Can you please share the URL of the page to investigate further?
Sure, added the URL to an example custom post in the website field!
Here’s the link to a page: https://lundylawdev.wpengine.com/about-us/ (collapsible menu working fine on mobile) and here’s a post: https://lundylawdev.wpengine.com/practice-area/catastrophic-injury-attorneys/ (no toggles showing on mobile)
I’ve been trying to figure out why for a couple days and nothing yet…
Hi Florencia!
I can see that the script is not implemented on posts. You can check by adding the script in the console (it works there). You need to check if the script is restricted for posts. You can contact the Elegant Themes support so that they can check the script issue by remote accessing.
I’m a long time fan of your products as well as this tutorial. I’ve just noticed something though that I was hoping you may have a solution for. On iPads (tested 6-10) in vertical orientation, the hamburger menu shows, but the expanding arrows do not, so users cannot see the child items in them and clicking only opens the parent page. Perhaps the .et_mobile_menu class isn’t being invoked at those dimensions. Here’s the site I’m working on where I noticed this: https://dev.concretecountertopinstitute.com
Any help would be greatly appreciated!!! Thanks so much!
Hi Daniel,
I am not sure about that. I checked your link, but do not see any submenus.
Resize the browser a bit to see them or check on a phone.
Check this screenshot:
https://snipboard.io/DKtaJn.jpg
Hi Daniel!
I have checked the console errors and can see that jQuery is getting blocked by the rocket loader feature of Cloudflare. Try deactivating the option and see if it helps.
That solved it, thanks!!!!!!!!!
Hello, I have a litte weird question. How to make the same menu work also on dekstop menu? I m currently working on website, where I have side slide menu and I want to work it also there but as hard I try, I cannot make it work also on desktop.
Hi Marek!
Can you share the URL of the page to investigate further?
Just wanted to see if you had a code that could close this menu if a person clicks outside the menu area, without having to scroll all the way back up on the menu.
Sure, please check our other tutorials. Here is the link: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-close-the-divi-mobile-menu-by-clicking-outside-the-dropdown/
Hi Peeaye´s 🙂
Great tut and it works perfect1
But: Is there a way that the “parent” link is not bold?
I have both parent links with children under, and links with no children. And the parent ones are bold – it lookes kind a messy in the dropdown.
Hope im clear – from Denmark, so mayby my gramma is “funny” 😀
Hi Lasse!
Please add the following code and see if it helps:
.et_mobile_menu .menu-item-has-children>a{
font-weight: 400 !important;
}
Change the font-weight value as per your requirement.
Hi there!
I used the additional code to Use the Parent Menu Item As Toggle For Submenu but now when you click on the parent item and the submenu opens, you can’t click on any of the submenu pages.
Hi Amber!
It seems to be an overlapping issue on the submenu. Can you share the page URL to inspect further?
Haus820.com – I had to remove the CSS & Javascript code that makes the parent a clickable toggle because our users weren’t able to click the sub-menu items. Do you need me to add the code back to re-create the error?
I have checked and the sub-menu is clickable on my end. Can you try using another browser and see if it helps?
Hi Nelson,
first of all, thanks for your code and your work.
I use youre code on one site, but the toggle (+) signs are not shown on the start page.
On other sites, it works fine.
Do you have any idea?
thansk a lot, Klaus
Hi Klaus!
Can you share the URL of the page so that I can investigate further?
Hello,
I’m not seeing the toggle icon on sub menus under submenus. Please could you have a look and see what I’m doing wrong. The site is https://www.axfordinteriors.co.uk/, please click on About then Locations. Locations is not showing the toggle.
Thank you!
Hi Rebecca!
Please try adding the following code and see if it helps:
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle:after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle:after {
display: inline;
}
This works! Thank you so much.
Thank you for the incredibly easy fix! I have your awesome responsive helper app, but I was seeking a solution I can simply add via CSS and this did the trick.