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.
FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
<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>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.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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;
}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, 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.
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,
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://www.peeayecreative.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?
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!
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