
How to Collapse/Show Mobile Menu in Divi theme
Recently, we were working in Divi theme and we have a long menu. It looks fine on desktop but on mobile it covers up lots of space. So, the best solution was to collapse sub-menu links and show them on click.
We found couple of tutorials online but they do not provide solution to keep parent menu clickable while our requirement was to keep parent menu item clickable. So, by doing some coding we were finally able to achieve this.
Here are the steps to make divi theme mobile menu collapsible:
- Add css code to hide sub-menu items on mobile.
- Add span tag to parent menu item using jquery so we can show “+” icon. It will indicate that there are sub-menu items.
- Finally, add css to show hidden sub-menu items On-click and change “+” icon to “x”.
Step 1:
First, you will have to add this css below, it will hide sub-menu items on mobile.
All css will go inside Divi Theme Options -> Custom Css. Alternatively, you can also add this css code into your child-theme (Appearance -> Editor).
#main-header .et_mobile_menu li ul.hide {
display: none !important;
}
Next we need to set position relative and background transparent for parent menu item that have sub menu.
#mobile_menu .menu-item-has-children {
position: relative;
}
#mobile_menu .menu-item-has-children > a {
background: transparent;
}
Now, we are going to style dropdown icon and move it to the right side.
#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;
}
Step 2:
Here is jquery code that will include span tag for each parent menu item that has sub-menu items.
You have to place this code into your Divi theme options -> Integrations-> Add code to the Body option, wrapped in script tag.
Step 3:
For collapsed menu, we have used “+” icon from divi icons set.
This css code you will paste in Divi Theme Options -> Custom Css.
span.menu-closed:before {
content: "\4c";
display: block;
color: inherit;
font-size: 16px;
font-family: ETmodules;
}
Change collapse menu icon to “x” when it is clicked and sub-menu items are visible.
span.menu-closed.menu-open:before {
content: "\4d";
}
Thank you for reading this post. Let us know your thoughts in comments.
Great tutorial:)
How do I make the parent menu items active links and still maintain the ability to collapse and open child menu items?
Hi Joachim,
if you added css and js code correctly you ll see + icon in front of parent menu item and upon clicking this + icon , child menu items appear. see working example here http://demo.mzcreativestudio.com/d-market/
You didn’t answer his question. How do you achieve the situation, that you have yourselves, where there’s a collapsible submenu and it’s possible to click the parent link?
The stuff you provided in this article doesn’t provide that – something is missing 🙂
Hi Mads, When you use above code, parent menu item link still works, you can set your parent menu item link via ‘Menus’ as usual. For collapsible submenu, ‘+ icon’ is used to open it.
Doesn’t work with Divi 4 (Version: 4.4.3) – submenues are hidden, no close/open icon.
It’s working in all of our themes 🙂
This is awesome, thanks for sharing the code! What if you only want one child menu open at a time?
im thinking the same thing. is it still possible to collapse other child menu while selecting other child menu?
Perfect!!! Awesome mate.
Hi there. Does anyone know a way to apply this method in a vertical menu, so the sub-menus don’t open to the side but downwards.
Any help? Thanks
I added all the code and the menu works fine, but I don’t see the + and x icons on the right side
Hi Tibor, please try to change color in css, it’s set to white ‘color: #fff;’ so that could be causing issue. Change ‘#fff’ to your brand color. Thanks
That worked! Thanks so much for the help. This menu was really bothering me. It finally looks awesome.
Thanks for sharing such a good idea, paragraph is pleasant, thats
why i have read iit fully
I’ve been trying to get a functioning sub-menu like this working on my Divi site for some time now. I’ve tried other methods, even custom-built my own, to no avail.
Your version, copy and pasted, works right off the bat. Thank you so much, Zahid.
Hi,
I do not understand where I have to enter step 3.
Sorry but i’m newbi 🙂
Hi Lucas,
It’s css code. You can enter it in Divi Theme Options -> Custom Css OR Appearance -> Customize -> Custom Css OR in Appearance -> Editor (style.css) file.
You may need to clear cache to see css changes after any css code.
Thanks!
I get an error with the script – says it will not allow code
Hi, Please provide more explanation and screenshot. You have to add js code in Divi theme options -> Integrations-> Add code to the Body option. Copy and paste exactly the given code.
Works like a charm! 😀
Thanks Zahid
You are welcome!
Hi, i tried another code and that didn’t work for me. but your code worked. thanks a lot for your helping.
Works in Firefox, but not in Safari or Chrome. Does not work on iPhone. On smaller laptop screens we see the hamburger appear. Because the dropdown navigation menu is so long, we need to eliminate the sub menus. I had hoped this would do it. But only in Firefox.
Thank you for this tutorial!
You can also change the color of parent menu item.
Example:
#mobile_menu .menu-item-has-children > a {
background: transparent;
color: #E9B85E;
}
I can’t enough thanking you. You save my time.
Thank you for this tutorial! It was very useful for me.
You are welcome!
Still works great in June 2019! Had some trouble getting this to work at first. Make sure to click the “Enable” button above the code insert sections.
Just come across this post, it works in Firefox for Android but not in Chrome. In Chrome the submenus are still expandable however the + sign appear in the menu below the parent and above the the first submenu item. Any ideas???
Hey John,
Please try to use inspector tool in chrome and adjust + sign position via css code. Thanks!
Awesome thank you !
Hi! Thank you very much for this code! Do you have an idea if and how this thing would work with a sidebar menu (sidebar module with a menu widget in it). Thank you very much in advance!!!
Hey, I think you will need to adjust css target classes according to menu widget in sidebar module. Thanks!
Is it possible that you do a tutorial on that? That would help me so much.
Ok, Do you have the link to share where you have added this? I will check and inspect there.
Here you go! This code will work for ‘Mobile Menu’ as well as ‘Menu Widget’ in sidebar or anywhere in the website.
https://github.com/mzahidiqbal/divi-theme-custom-snippets/blob/master/mobile-and-menu-widget-submenu-collapse-show
Note: If you have already added the code provided above in this post, please remove that and replace with this JS and CSS code. Feel free to ask incase of any issue.
Works great except it is making the parent item text bold. Is there a way to correct this? Only half of my menu items are collapsable so some are thicker than others.
Please use inspect element tool of browser to adjust css font-weight property of the menu items and then update css code accordingly. Its something related to your website menu styles. Thanks!
Hi Guys,
Thanks a lot for the codes but I have a problem with menu.
it only works if you are logged in and with the session open on the wordpress dashboard. Otherwise only you can open the pages without submenu. Any idea about this? Many thanks for your help.
Hi Jesus,
No. It works without being logged-in as well. You must have caching on so I would recommend clearing cache on your device.
Thanks!
Hi MZ,
I do not know what to do . I cleared the cache before my previous question and again now. However I can’t open certain pages from the mobile menu and the closed session.
For example if you click from the home page in ” Tratamientos” and then y the submenu click in “nutricion” and from that “nutricion” page you try to open another one with submenu it does not open. Only pages that do not have submenus open. Could you try what I say? Thank you very much again
Please send the website link using the contact form on our contact page. I will need to take a look at that because its harder to say anything without debugging the current situation of your menu. Thanks!
Hello,
Please, how i can apply this on DIVI Mega Menu option?
I try to do somthing like this site https://www.mtp.es/
Thanks
Hi Danilo,
Please try to check the code carefully and apply classes for mega menu accordingly. If you don’t understand it then please send us your website link via contact form. Thanks!
Hi, I want to use this for a menu made with the menu module. Then the class and ID aren’t the same. I have tried to put custom ones and change the code but I can’t make it work unfortunately.
Could you help with that please?
Thanks in advance! 🙂
Hi Laura,
Please get in touch via contact form on our website. We will need the link to see it and suggest fix.
https://www.mzcreativestudio.com/contact/
Thanks!
AMAZING! – Thank you for sharing this nice code. Really helpful, much appreciated.
I got a question. – Is it possible to add a “animation/transition” which triggers when the plus is pressed? – So that maybe the child menu opens slower/smoother for instance
Yes its possible. You will need to apply css for it. Thanks!
Could you give an example of CSS to apply a transition/animation?
– Like a smooth unfold? – Thx.
Hi there, thank you for the tutorial but it doesn’t works form my mega menu Divi, please can you help me? I post the test web site in the form below, thank you! Federico
Hi Federico,
Please try to ‘target’ correct classes in the code for your mega menu, it will work then!
Thanks!
Really helpful!
It works perfect.
Do you know how to change the speed or add a effect to show it with a little dropdown animation?
Thanks a lot! 😀
You will need to apply the desired animation css code on it by targeting dropdown specific classes.
Thanks!
Thanks for sharing with us! You are a hero!
Hi,
Thank you very much for your effort to make such a clear tutorial. Unfortunately, for some reason it is not working on my website. The mobile menu does not change at all no matter what I put in the CSS. Do you have any idea what I am doing wrong?
Thanks in advance!
Kind regards,
Niels
Hi Niels,
Thanks for comment! Please get in touch via contact form on our website. We will need the link of page to see it and suggest fix.
https://www.mzcreativestudio.com/contact/
Have a great day!
Hey, Great help. Something strange is going on. The code works fine for the main menu. But when I try to add a full-width menu via the menu module, the code fails to work. Any insights as what could be the issue? And how to fix it?
For Menu Module, you will need to target the classes in the code provided to make it work there properly. Thanks!
Hey, so it works great in mobile but it appears I am having issues now on the desktop the padding is messed up it may be some other css code I have implemented? It has a lot of spaces and hover over the box around it. How would I fix the padding on my desktop menu?
Hi Nathan,
Please use inspect element tool of browser to look for the css that’s adding padding. You can follow this tutorial if you don’t know how to use chrome developer tools: https://designtlc.com/use-chrome-inspector-edit-website-css/
Thanks!
Thank for sharing this, smart !
However this doesn’t work properly for me.
Actually, the symbols + and ☓ are under the menu item not beside as your example.
Could you please help me?
Hi NJAIMI,
Yes sure, please contact us through our contact page with your website address. Thanks!
Brilliant. Worked perfectly on first attempt even with a custom-placed mobile menu. Great stuff and thank you!
Awesome, Enjoy!
Thank you for this code, tried several other variations before finding this one which worked straight away
That’s Awesome Andy! Enjoy!
hello, i tried but im not succeed, nothing happening
can u know why ? i copy and paste exactly what u write
Hi,
Please try to change color in span.menu-closed:before { … } class. Currently it has color: inherit; you can change ‘inherit’ to some color name or hex code.
Thanks.
Your code working fine. The + sign has suddenly disappeared and instead of that some other icon is appearing. Please help.
Hi,
Your Mobile Collapsible Menu seems to be appearing correctly as I checked on your website. Please cache on your side that might causing issue.
Thanks!
YOU. ARE. MY. HERO!! My menu has been such a pain on mobile for 2 years and this finally solved my issues and users will be so much happier. Thank you very much. This is why the internet exists, to help each other.
Awesome works like a charm. I’ve used this code snippet a few times but recently I’ve hit a snag. If I want the drop down icon next to the menu titles what’s the best way? I’ve taken off the absolute positioning so it doesn’t push to the right but it returns on the next line. I attempted a flex box workaround but then the nested menu opens to the right instead of underneath. Any thoughts? Sorry my site is local only at the moment.
Worked great with some careful checking of the ID and classes. In my case, I had to change #mobile_menu to #mobile_menu1 and #main_header to #navMenu. After that, it worked flawlessly.
I am nominating you for the Nobel Prize for this!
Thanks!
I did each step as explained but it does not work on my Divi site …
Please write to us through our contact page and provide url of your site. Make sure to clear browser caches and double check IDs, classes you applied. If you have a cache plugin on the site, trying purging all caches. Thanks!
Your collapsible menu was working fine, but suddenly it has stopped working. Please help.
It’s working on your site, we have checked. Please clear your browser caches or check any conflict on site due to some other plugins.
Hello,
I have the plus that is displayed but it does not move (at the level of the sub-menu).
Should I enter a class in the menu? Or is it a problem that happens? Thanks
Thanks
Sorry what you mean by it doesn’t move?
You can add a class to menu and adjust as you want. Adding classes isn’t a problem.
You are awesome! Worked perfectly!
Merci beaucoup ! Top top top