How to Create a Divi Mobile Menu Collapse Effect
In this tutorial I’ll show you How to Create a Mobile Menu Collapse Effect in Divi. It’s a great way to customize the Divi mobile menu on your site and is VERY important for UX (user experience) when you have a lot of menu items.
There are a lot of tutorials out there on this and I’ve used several over the years but this particular method has been the best and most reliable. I’ve actually modified the code from the OG post here on the collapsing effect.
In short, we’re going to use a little CSS and jQuery to make this happen. But don’t worry, if you’re terrified of code, it’s all explained and provided below.
In short, the CSS below controls the styling of the actual mobile expand/collapse icons and the jQuery provides the actual expand/collapse function.
*** Important Update – Now 2 Options ***
The code shown in the tutorial DOES NOT work with the Divi Theme Builder as I created this before that was released. But the revised code that DOES work with the theme builder is below in option 2 🙂
Thanks to one of my developers Christian at Brightsol for helping me revamp this code.
Option 1 (WITHOUT Theme Builder):
Just add this to your theme customizer CSS area or ideally your child theme stylesheet. You can customize the color, size, etc to your liking. Again be sure to reference the ET icon guide (link below) if you want to change the icons.
/********* Mobile Menu Collapse ********/
/**** This hides the sub menu items on mobile ****/
#main-header .et_mobile_menu li ul.hide {
display: none !important;
}
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#mobile_menu .menu-item-has-children {
position: relative;
}
#mobile_menu .menu-item-has-children > a {
background: transparent;
}
/**** This styles the icon and moves it to the right ****/
#mobile_menu .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
/**** Here you can swap out the actual icons ****/
span.menu-closed:before {
content: "\4c";
display: block;
color: #fff;
font-size: 16px;
font-family: ETmodules;
}
span.menu-closed.menu-open:before {
content: "\4d";
}
Here’s the jQuery:
Be sure to put this in the
section in the integrations tab under Divi > Theme Options > Integrations.
<script type="text/javascript">
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$('#mobile_menu .menu-item-has-children > a').after('<span class="menu-closed"></span>');
$('#mobile_menu .menu-item-has-children > a').each(function() {
$(this).next().next('.sub-menu').toggleClass('hide',1000);
});
$('#mobile_menu .menu-item-has-children > a + span').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('menu-open');
$(this).next('.sub-menu').toggleClass('hide',1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Option 2 (WITH Theme Builder):
Just add this to your theme customizer CSS area or ideally your child theme stylesheet. You can customize the color, size, etc to your liking. Again be sure to reference the ET icon guide (link below) if you want to change the icons.
/**** This hides the sub menu items on mobile ****/
#page-container .mobile_nav li ul.hide {
display: none !important;
}
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#page-container .mobile_nav .menu-item-has-children {
position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
background: transparent;
}
/**** This styles the icon and moves it to the right ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
/**** Here you can swap out the actual icons ****/
#page-container span.menu-closed:before {
content: "\4c";
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
content: "\4d";
}
Here’s the jQuery:
Be sure to put this in the
section in the integrations tab under Divi > Theme Options > Integrations.
<script>
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
$('.mobile_nav .menu-item-has-children > a').each(function() {
$(this).next().next('.sub-menu').toggleClass('hide',1000);
});
$('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('menu-open');
$(this).next('.sub-menu').toggleClass('hide',1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Links mentioned in the video:
- Elegant Themes Icon/Font List
- OG Menu Collapse Method – MZ Creative Studios
- Additional Menu Collapse Method – Elegant Themes
Additional resources:
Like this tutorial? You’ll love my CSS Course.
Use coupon code “CSS30” for $30 OFF at checkout!
Love it! Great tutorial, this was exactly what I needed.
Great to hear, Lori! Glad to help.
Love the tips on how to minimize the mobile menu even if it is a decent size, still a good idea to add this code to keep it simple!! Thanks for all your tips!!
No prob, David. Totally agree on having this in almost every case. We have this standard on our staging sites now!
Thank you Josh. I did the script on the css and the jquery to the body. It cleaned up the menu but the “+” sign was not showing. I have removed it off the site so it would not bring up any confusion. – Mark
Mark, you may need to clear the cache and do a browser refresh to make sure the CSS applies to show the +.
The color being #fff might screw some people up!
/**** Here you can swap out the actual icons ****/
span.menu-closed:before {
content: “\4c”;
display: block;
color: #fff;
font-size: 16px;
font-family: ETmodules;
}
if ‘+” sign not showing because color:#fff still white. Try change the color…..
Thank you for posting this Josh! For some reason on the site that I applied this to, there is no icon appearing. It has the parent category in bold (that has sub categories under it) now. This is ok but not what this code is for. The bold category does prompt the user to click to see more, and from there shows the sub-categories. But I’m curious why the code isn’t working as written. This site doesn’t have a child theme. I love all your tips and tricks. Thank you!!
I did clear cache and refreshed browser. 🙂
Amy, unfortunately its the same for me, the main category is bold but the icon does not appear. Did you happen t find a solution? Pls share if yes.
Josh,
I am facing the same issue. It will be great if you can help.
Instead of having to click the icon to expand the menu, how can we make it so clicking anywhere on the parent row expands/collapses.
Hi Josh,
Great tutorial, is there a way that the menu can be fixed to the top of the screen on mobile whilst incorporating everything in this tutorial.
Nick this should help! https://divilife.com/create-fixed-mobile-menu-divi
Hi Josh, your info, training videos and knowledge are fantastic thank you so much for sharing.
Will this work for menus that have top level, submenu and sub submenu. Categories in a site menu.
As I have a client site that has three levels of menu…?!?
Thanks in advance
Ah good question. I’m not sure, I have a feeling it would need to be adjusted. Let me know if you try it out.
In my site the expand is not working
pls check and guide me
https://hoteleldhestar.kaliber.is/
Please be sure to put CSS and JQuery in all the right spots and have cleared cache and refreshed browser!
Any updates to achieve this for the new menu using the Divi Theme Builder?
I have used this code for a few websites but it seems that the new menu have changed the css id or something else
It’s working fine for me with latest version 4.0.4. Let me know.
HI Josh,
It doesn’t seem to work on the theme builder, works brilliantly otherwise. Not sure why elegent themes havent built this into Divi the mobile menu looks aweful out of the box.
Yeah doesn’t work with the theme builder. Working on a solution for that.
Any updates on the theme builder solution? Thanks! Really appreciate your site!
Hey Josh, I wanted to say thank you so much for all your time saving techniques. 🙂 Great job. Also wanted know if there was a solution yet for the Theme Builder Menu Module for this?
Yep here’s the code for the theme builder! I’m going to update this post and do a new video this week:
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$(‘.et_mobile_nav_menu .menu-item-has-children > a’).after(‘‘);
$(‘.et_mobile_nav_menu .menu-item-has-children > a’).each(function() {
$(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
$(‘.et_mobile_nav_menu .menu-item-has-children > a + span’).on(‘click’, function(event) {
event.preventDefault();
$(this).toggleClass(‘menu-open’);
$(this).next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
/********* Mobile Menu Collapse ********/
/**** This hides the sub menu items on mobile ****/
.et_mobile_menu li ul.hide {
display: none !important;
}
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
.et_mobile_menu .menu-item-has-children {
position: relative;
}
.et_mobile_menu .menu-item-has-children > a {
background: transparent;
}
/**** This styles the icon and moves it to the right ****/
.et_mobile_menu .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
/**** Here you can swap out the actual icons ****/
span.menu-closed:before {
content: “\4c”;
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
span.menu-closed.menu-open:before {
content: “\4d”;
}
Thank you 🙂
Josh, do you know what divi 4 code should look like to work?
I’ll be revising the tutorial but try this out…
<script type="text/javascript"> (function($) { function setup_collapsible_submenus() { // mobile menu $('.et_mobile_nav_menu .menu-item-has-children > a').after('<span class="menu-closed"></span>'); $('.et_mobile_nav_menu .menu-item-has-children > a').each(function() { $(this).next().next('.sub-menu').toggleClass('hide',1000); }); $('.et_mobile_nav_menu .menu-item-has-children > a + span').on('click', function(event) { event.preventDefault(); $(this).toggleClass('menu-open'); $(this).next('.sub-menu').toggleClass('hide',1000); }); } $(window).load(function() { setTimeout(function() { setup_collapsible_submenus(); }, 700); }); })(jQuery); </script> CSS in Theme Options: /********* Mobile Menu Collapse ********/ /**** This hides the sub menu items on mobile ****/ .et_mobile_menu li ul.hide { display: none !important; } /**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/ .et_mobile_menu .menu-item-has-children { position: relative; } .et_mobile_menu .menu-item-has-children > a { background: transparent; } /**** This styles the icon and moves it to the right ****/ .et_mobile_menu .menu-item-has-children > a + span { position: absolute; right: 0; top: 0; padding: 10px 20px; font-size: 20px; font-weight: 700; cursor: pointer; z-index: 3; } /**** Here you can swap out the actual icons ****/ span.menu-closed:before { content: "\4c"; display: block; color: #000; font-size: 16px; font-family: ETmodules; } span.menu-closed.menu-open:before { content: "\4d"; }Josh,
Working with WordPress 5.41 and a child theme from Divi Version: 4.4.7
The first sets of code did not work, however the second set worked excellent.
CommentJosh, you are my hero today. Thank you and give you a thumbs up ??? – I’ll be up to date with you. Best regards.
Hi
looks interesting and apealing but
it did not work!
I did everything as you suggested but the only thing changing was that there was a plus icon on mobile.
If I clicked on it, the subitems did not appear.
So I had to delete the css codes .
I feel sorry because I really would prefer it working.
So you have a solution for me.
Thanks
Manfred
Maybe an issue with divi 4.0?
So I’m actually on 4.0.4 and it works fine for me. Same code as above. See my tutorial test site here for reference: https://tutorials.joshhall.co
You have the CSS and JQuery in all the right spots and have cleared cache and refreshed browser??
Hello, I have Divi 4 and I tried your codes. It works on Google Chrome but not on Safari! I see this problem with browser crossing because I like to test everything and everywhere. Do you maybe know why it doesn’t work on Safari? What should I do since 50% of population use safari on iPhones and I cannot allow this problem to last?
Thanks!!
It works with Divi 4.0.6 and higher. Should be good with Safari now.
Does not work on Divi 4. But this (from 2016) does.
https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items
It works with 4.0.6 and higher.
Hi Josh,
This working in the Divi 4.0 on menu module built on theme builder? Or only in the default menu?
Cherrs
It works with 4.0.6 and higher.
Hi Josh
I follow all script and its work for Divi 3.0 but not for 4.0
Have any suggestion?
Thx
It works with 4.0.6 and higher.
How to setup icon open and close?
Hi! I had Divi 3 something on a site that hasn’t gone live and when I hit the + sign on mobile menu, it didn’t deploy. I uploaded Divi to Version: 4.0.6 and now it works!
Whew!!
I noticed that too, Rodrigo. The past couple updates have seemed to fix a bunch of little things like that!
Great tutorial Josh. I use it but since i make my own header using pagebuilder function, i need to change that #et-mobile-menu to #mobile-menu1.
The rest are working well. Just need to change that menu id to make it works. and i bookmark this page for my future reference too!
NEW CODE JOSH POSTED IN COMMENTS
solved it for me on Divi 4.0
Thanks Josh. Very helpful 🙂
I can’t get it to work for me DIvi 4.9 and I put it in the child style.css and tried your new updated script on Oct 23rd in the body section. I would love this to work.
Hi Josh, thank you for this tutorial.
I´m facing something different and hope you can help me…
On this page of yours, on the mobile view, if you tap on the blog or in anywere in the line that has a + icon it shows the collapsible menu. “On desktop it opens the blog..but mobile shows the collapsed menu”.
On my website, mobile view it dosen´t work the same, I have to tap exactly on the + icon to show the collapsed menu and what I want is to tap anywere on the menu line item. Can you please give a clue if Iam missing something please?
Thanks again all the way from Brazil!
Thank you so much for this! It worked flawlessly. I sincerely appreciate you taking the time to publish this.
Hi, Josh Your Work Great, but this code is not working in Child Theme. It’s only work in Additional CSS; please update in your article – Keshav
If you put it in your child theme stylesheet, be sure to clear your cache and refresh and it’ll work.
Great tutorial Josh, thank you.
I confirm your code of October 23th is working fine with Divi 4.3.2 and the theme builder.
Your posts and videos have always been a great source of inspiration. Net and clean.
Thanks Gilles! Awesome to hear.
Hello josh,
thank your for your tutorial. i tried everything, but it still does not work. when i am in wordpress it looks good, but it does not work on the browser. i dont know what to do. can you help me?
Hey Vicky sounds like you might just need to refresh your browser and clear cache! That’s usually the case if you’re not seeing the CSS changes immediately.
Hello Josh, Thank you for your response 🙂 That is what i did first. But it does not work. If this would be working, I guess other users should see the collapsing menu, but they don’t. I asked several people to look on their phones if the menu is collapsing. It is only working in the wordpress customizer and when I inspect the site while I am logged in in wordpress. In incognito mode the menu is not collapsing. I noticed, that the items which should collapse don’t have the “menu-open.menu-closed”-line when I inspect the code. I don’t know if this is important, but that is the difference between my site and others where the collapsing-effect is working.
Hi there and thank yo ufor the guide,
Im using a custom child theme and cant figure out if there is a different class identified with the custom menu incorporated with the them.
I used your updated code and I tried changing the “mobile-menu” to custom menu as that was the css class added to the menu in builder but that didnt work. Any help would be greatly appreciated.
I figured it out! I had to put the script into my header and not the body for my particular theme.
Good to hear, thanks!
Thank you so much for your feedback, it helped me a lot. I was having the same issue and followed your advice and placed the jQuery on the “head” of “integration” and it worked perfectly.
For those people, like myself, that wanted a background color there is a quick and easy fix: to the same code:
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
.et_mobile_menu .menu-item-has-children {
position: relative;
background: #86d598; /**** This gives a background color of your choice to the submenu ****/
}
.et_mobile_menu .menu-item-has-children > a {
background: #86d598; /**** This removes the transparent background to a color of your choice ****/
}
JOSH – Thank you very much for this code, I left a comment on YouTube and you reply to me very quickly, shows how professional you are.
Semper Fi
Thanks Pedro!
hi nice work here
but unfortunately it did not work for me
reason cold be conflicting code i have lots of code on there
is there anyway you can help??
First make sure to clear cache and refresh browser. If it still doesn’t work, possible there’s a conflict. Feel free to request for help in my Divi Facebook Support Group!
Works on desktop Chrome for about 2 minutes, does not work on android, Mac Safari or android phone.
great post. any idea how to make the clickable area the entire width, including the page name. now the visitor needs to hit the + on the side for it to open.
sir this coding is not working on my web site, can you please help !
Awesome, thanks! I’ve put the code into the flexible “Code Snippets” plugin, where I manage all my custom code in one place, easily switch it off if troubleshooting and export it to other sites if I want to.
Tested in Divi 4.4.5, Chrome and Firefox.
Hi I’m having double the amount of menu items appear in the mobile drop menu? HOME WEB DEVELOPMENT GRAPHIC DESIGN UI / UX VIDEO PRODUCTION x2
I’m not sure whats the problem and I’ve went over and over this
Hi Josh!
At first: it is a great work, thank you! 🙂
But: Could you please help me, how should I modify the code if I want the submenus to appear when I click on the menu item as well, not just on the “+” icon? Now if I click on the menu item, it reloads the page.
Thank you in advance!
Gábor
I am looking for the same solution. Have you found a way so submenu items drop down when you click on the menu item?
Hello All,
I’ve figured out how to make the whole menu item clickable to expand / collapse the submenu. This code is for the Theme Builder:
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$(‘.mobile_nav .menu-item-has-children > a’).after(”);
$(‘.mobile_nav .menu-item-has-children > a’).each(function() {
$(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000);
$(this).off(“click”);
});
$(‘.mobile_nav .menu-item-has-children > a + span’).on(‘click’, function(event) {
event.preventDefault();
$(this).toggleClass(‘menu-open’);
$(this).next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
$(‘.mobile_nav .menu-item-has-children > a’).on(‘click’, function(event) {
event.preventDefault();
$(this).next().toggleClass(‘menu-open’);
$(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
Hello,
Thank you so much for this great tutorial. I am wondering if it’s possible for a user to tap anywhere on the menu item line to open the nested items instead of only the ‘+’ icon?
Thank you!
Hello, has someone found a solution to the problem you described?
I’ve been dealing with that for a long time..
Does somebody has any idea?
Really, Many many thanks……
Hey Josh,
Thanks for the tutorial – it worked right away on Divi 4.4.8.
There are some small issues/requests I am hoping you can comment on.
1. I would like to hide the last menu level on mobile (as I have 3 levels on my menu). Desktop shows all 3 levels. Mobile shows only 2 levels. That can be easily done via CSS and media queries. However, the jQuery still knows about the last (on mobile hidden) level, thus the plus sign is still shown. Any idea how to workaround that?
2. Is there something I can add so that only one submenu stays expanded? If I expand another submenu it would be nice if the previous one closes. If I close the entire menu and re-open it would be cool when it would be shown fully collapsed again.
Any hint would be of help – thanks so much!
Hi Josh! Great Tutorial! But I have an Issue: after edit my menu (I change a page with another one) the collapse function doesn’t work..maybe is a jquery problem…could you help me please? thank you!
Hi need your help, this works great thank you but I need the menu to expand if you click on the whole bar, not just the icon and the icon removed. Also, we need the color of the parent menu item to change once expanded. Please help, Thank you!
hi there, the code work fine, if you don`t see icon for open and close….change color, it works. Thanks man, keep up the good work
The ones who complained about that icon does not show up, it was the same for me and what I realized is that the icon color is white and my mobile menu background was the same as well. So, I simply changed the color of the icon to #111 and the problem solved 🙂
Sometimes so easy and little details may not be noticed. That’s the reason I am writing this in case someone else may use it 🙂
/**** Here you can swap out the actual icons ****/
span.menu-closed:before {
content: “\4c”;
display: block;
color: #111;
font-size: 16px;
font-family: ETmodules;
}
span.menu-closed.menu-open:before {
content: “\4d”;
}
Sadly I could not get this to work on my development site at all – tried placing the javascript in the Head and then in the Body but it made no difference. I really need a collapsing mobile menu.
Usually you just need to clear cache and refresh browser. If you’re using the theme builder, this doesn’t work but I’m going to post a revised code for that soon.
Hi Josh! Thank you for this tutorial – it works great! I am trying to change the color of active menu items for my mobile menu, but unfortunately, whenever a parent item is active all of the child items in the submenu underneath it also change color. I’m not sure what classes to use to only target the active link and not its “children.” Thanks in advance for any advice!
Thank you so much
Entered the revised code for the theme builder, refreshed cache and browser, and it still seems to have no effect.
Casey you tried the following?
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$(‘.et_mobile_nav_menu .menu-item-has-children > a’).after(‘‘);
$(‘.et_mobile_nav_menu .menu-item-has-children > a’).each(function() {
$(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
$(‘.et_mobile_nav_menu .menu-item-has-children > a + span’).on(‘click’, function(event) {
event.preventDefault();
$(this).toggleClass(‘menu-open’);
$(this).next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
/********* Mobile Menu Collapse ********/
/**** This hides the sub menu items on mobile ****/
.et_mobile_menu li ul.hide {
display: none !important;
}
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
.et_mobile_menu .menu-item-has-children {
position: relative;
}
.et_mobile_menu .menu-item-has-children > a {
background: transparent;
}
/**** This styles the icon and moves it to the right ****/
.et_mobile_menu .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
/**** Here you can swap out the actual icons ****/
span.menu-closed:before {
content: “\4c”;
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
span.menu-closed.menu-open:before {
content: “\4d”;
}
Helped me a lot.
Thanks from the core of my HEART 💖💖💖
Hi there,
Can U please help me?
What am I have to change in the code if I would like to use it with mega menu?
I have 20 submenus … 😀
Thank YOU for your reply 🙂
I’ve tried it but its not working
Just used this for Theme Builder mobile menu, works like a charm! Thank you again Josh!
Great to hear, Mark! Hope all is well in Dojo land 🙂
Please help me with the exact mobile menu collapsed css you used on this website to my email
Hi I’m not sure if anyone can help with this. I have the CSS and JQuery loaded and when I inspect on Desktop it works perfectly. On a mobile device it also works on every single web page EXCEPT the landing page. All interior pages are just fine but the main landing page will not display the collapsed menu. I’ve tried multiple devices, restarts and just waiting it out.
I’d think there was an issue with something I did with the code, but it literally works exactly as expected everywhere except for the landing page on an actual mobile device.
Any ideas?
Thanks!
I got this to work, thank you for the excellent tutorial. However i do have a question: I am using the divi mega menu option to get the big amount of menu items nicely rendered in columns, these colums have “titles” well… they are sub-menu items and the rest of the column are sub-sub-items. For one mega menu i have hidden these column titles (i wanted my menu items sorted in 4 columns but not 4 descriptive categories) i did this with some css:
.no-column-header-menu > ul.sub-menu > li > a {
display: none !important;
But now your solution for colapsing mobile menu items does colapse it, but i cant toggle to open up and see the sub-sub items because the sub-items are hidden in the first place. Can you think of a workaround? The menu item is called “indicaties” to be found in the main menu of the website. Thank you for your time!
This is an awesome tutorial! Thanks!
I’m using it with the Theme Builder (Option 2) – only 1 issue:
The menu items that have submenus that should open up the nested submenu when you click on the word directly don’t do anything but reload the page when clicked on. The submenu only opens up when the plus icon is clicked on the side. This can be confusing for some users that will just give up after a few clicks and won’t think to necessarily click on the plus icon.
Would you happen to have a solution for that?
Josh Hall, you are the best. Thanks for the great tutorial!!
Greetings from Germany
how/could you do this on a left menu module?
Hi Josh!
Is this still usable now that WordPress has removed jQuery?
Yeah Paul it’s still good. Check out my site here as it’s the same code I use 🙂
@Paul, jQuery is still included, just another version. There’s only one thing you need to replace, because of deprecated code:
Previously:
$(window).load(function() {
Now:
$(window).on(‘load’, function() {
The reason for that change is that .load is now deprecated.
Hi Josh
I follow all script but why background color still tranparent if i click
Kindly review my webiste https://minimaxdigital.com
Thx
Thank you this looks great. Is there a way to make the whole menu (not just the + ) clickable, I imagine this would be hard because you make it a sub menu with the main tab linking to itself, but if there is a way that would be much appreciated. Thanks again.
Hello,
bravo for this tutto.
However, even if it works, the icon is not displayed.
And in addition there are organge icons which appeared in the child theme.
Here’s a photo. I am not a coder and English is not my first language so I may not have understood everything. Thank you for your help.
https://imgur.com/V3PuFJS
Thanks Josh! Your tutorials have been really helpful
This doesn’t seem to work on WooCommerce product pages.
For anyone that is saying that the plus icon isn’t showing up, to fix this, simply change the color to a full hex number. In the CSS code, replace “color: #000;” with a full hex number like “color: #e8e5ed;” and it works perfectly. Wahoo!
It works fine on pages.
But i dont work on woocommerce pages. Product, categorie pages etc..
Hey Josh!
Is it possible to add a transition duration to the collapsible effect? Similar to how the mobile menu comes down when you click the hamburger icon? Just so that the submenu doesn’t open so suddenly.
Thanks, Josh. Works great but I get an annoying error in the console:
Uncaught TypeError: Cannot read property ‘replace’ of undefined
at HTMLDivElement. (custom.unified.js?ver=4.9.0:56)
at HTMLDivElement.dispatch (jquery.min.js?ver=3.5.1:2)
at HTMLDivElement.v.handle (jquery.min.js?ver=3.5.1:2)
@Kim Skaggs – the same is happening to my site. Did you find a solution for this please?
Also, the menu is not opening up – only the parent is showing with a plus sign.
Thanks,
I am getting 2 sets of arrows on https://rollinghills.org any advice. I can hide the smaller switching icons, but that’s a nice touch.
Not sure if the first one went through, I’m seeing double arrows on https://rollinghills.org. Thanks
Nevermind, it was a divi hacks setting. Keep up the great work.
Hi, Josh. I noticed on your site the top-level menu items on mobile turn to “#” links and open the submenu by clicking on them. How are you achieving that functionality?
Hey Josh, great work! Is there a way to get the full row as a toggle on click and not only the plus sign? Thanks, Andre
Thanks a lot! you are a master adding the information on how to make the menu collapse on mobile phones when the menu is created with the Divi theme builder
Muchas Gracias! eres un maestro añadiendo la informacion de como hacer que se colapse el menu en telefonos moviles cuando se crea el menu con el theme builder de Divi (for my spanish friends and your SEO)
Tks a lot!!!!
Thanks for a great and elegant solution. I’ve implemented this on two websites now. It actually works better than the Elegant theme’s version. One thing, I’m not sure if you mention, but if you are using a fixed menu bar and there is a long menu, or for when the phone is horizontal – it’s a good idea to make the menu scrollable. That’s the only thing I added to this code. Great stuff!
Everything works well under Theme Builder on all pages. But menu mobile does not collapse under “Woocommerce Shop or All Product Category Pages”
Thank you from Italy Josh!
Hi Josh,
Thanks for this guide – it works perfectly. But I have the following issue: Only when clicking on the + icon, the submenu will open. By clicking on the text next to the +, the whole menu is closing (because i made it a # site with no content). Is there a possiblity to let the submenu fly out by clicking on the main menu text, just as if you had clicked on the +? I don’t want the menu to be closed.
To take your example: By clicking “About Us” the menu is closing, because there is no content behind the site (just a # custom link). I want the submenu (“Our Story” “Our Team”) to be opened by clicking the + icon and “About us”.
Do you have any idea how i can fix this? Thanks in advance for your help!
This was amazing. Thank you so much.
It’s perfect.
Works great, unfortunately not on all WooCommerce pages (product category, tags, product pages).
Congrats! Nice content, really helpful 🙂