Customize the mobile menu with this easy to follow JavaScript and CSS snippet! Making submenus collapse keeps the long mobile menus clean and responsive 🙂 It works with the Divi menu module and standard Divi header.
Collapse Submenus make it easier for users to navigate your website. If you are looking for the plugin method for beginners (no coding), check out our Divi Switch Plugin. You can create collapse submenu items inside burger menu on mobile with one click of the switch. The coding method is for more advanced users.
Snippet Limits
The following are the limitations of the snippet:
One collapsible menu can be used on the page. (Please let us know in the comments if you would like us to modify the snippet to allow multiple collapsible menus on the page)
Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.9.4 of the Divi Theme and Divi friendly hosting with PHP 7+.
If you think this code saved you time, we will be happy to receive a comment and would motivate us to create more! ?
Don't forget to subscribe to our youtube channel because there’s more to come!
License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com modified by Divi Space, May 7th, 2021. Licensed under the GNU General Public License v3, no warranty; click here for details.
I can’t save the javascript code. i get the spinning wheel but it never saves. Could Wordfence be preventing me from saving the javascript code? How do i solve this problem
Hello, I need some help. I put the codes as shown in the video but my mobile menu is showing only + icons which are not clickable. Like does it work only if I use the default menu? I’m using a custom menu. Please help me.
Website: https://buyofuel.com/
Thank You.
I added the snippet. It collapses the menu, but it won’t expand to sub-items. Instead, when I click a menu item it navigates to the page without expanding. https://stivers.com/
Zohreh, with the performance update ( Divi 4.10.x) by default, the “Dynamic Icons” option is enabled in Divi. If icons in Divi modules on the page are not used, they are not loaded and lead to the display of inappropriate characters, like “L” in your case. You can disable “Dynamic Icons” and it will work again.
You can always load the font with the CSS and that will allow you to enable the “Dynamic Icons” option.
I added the snippet. It collapses the menu, but it won’t expand to sub items. Instead, when I click a menu item it navigates to the page without expanding.
Hello , I need some help. I put the codes as shown in the video but my mobile menu is showing only icons and when i click on the icon it loads the parent page. Please help me. Thank You.
Hi there! Trying to enable the collapsible dropdown for our business (on both prices & programs – submenu & 2ndary submenu as well as under parties & groups – submenus). I’ve installed both the CSS and Java and can’t seem to see the difference on mobile devices after trying in excess. Help?
Hi there, I am not sure if I am doing something wrong but the code does not do anything in version 5.9. Used both CCS and JavaScript as explained, the menu does not collapse on mobile. Thanks!
Hello, thx again for your code, but I have discovered an issue there. How could I make a parent link to be clickable after I open the submenu? For example, I have a parent/sub/children. What should I modify in the code to make my Sub clickable too? Or how could I make only “+” to expand, but the titles to use as links? Thx a lot!
Anna Kurowska
on February 7, 2022 at 12:38 pm
We have a seperate snippet created to achieve that. This feature is also available in the Divi Switch plugin.
Thomas
on January 25, 2022 at 2:06 am
Hello! Thank you for this code.
Is there a way to make the whole link clickable, and not only the “+”?
Hello! It’s working when I use Inspect mode on our website and choose the Iphone X dimension. But when I open it on my phone, the menu is not collapsible anymore
Hi Basharat, I can’t think about the reason why it doesn’t get saved. You may need to contact Elegant Themes support and maybe they can troubleshoot. Unlikely code is the reason. There are a few ways of adding code to the Divi, so maybe you can try alternative options?
Hi, I see the snippet is working fine on your site, the only issue is, it takes above 5 seconds to load the DOM content, and after that JavaScript starts working. More information you can find here about the method used: https://api.jquery.com/ready/
You can consider optimising your site or simply change the first line of the JavaScript that defines when the JavaScirpt is executed.
With the latest performance update (4.10.x) there is a small problem. By default, the “Dynamic Icons” option is enabled in Divi. If otherwise on the page the icons (ETModules) are not used, they are not loaded and lead to the display of inappropriate characters for + and x . You can disable “Dynamic Icons” and it will work again. Maybe the info helps someone. (I think the problem Ajay reports is caused by the divi new options).
Hello. Thank you for this code. I am having the same problem as Guido, the mobile menu works but when I tap on a sub item with a ‘+’ sign it does not open that menu item, but makes the menu close again.
I am testing this using the CSS in the Divi Theme Options, in both Safari and Chrome. I tried using the Javascript in the ‘Head” section of the Integrations tab but that didn’t work at all. I also tried using the code on this page https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/ but neither the Javascript nor the CSS worked for me at all. I did watch your video on how to add Javascript correctly and it was the method I was already using.
Any input you have would be very appreciated. Thank you.
Hi, Thank you for the reply. I had previously read that article, and tried the Javascript in the ‘Head’ section of Integrations. That did not work at all. What am I missing from that article… any more specific help you could offer would be appreciated.
Hi again, I just added the Javascript back into the Head area, and left the CSS in place too. That works. I appreciate all your free articles, and your great replies, but I have to say that it was not at all clear from either this page or that other article that BOTH needed to be in place. My understanding from these two resources was either add one method or the other. Perhaps on this page you could say up at the very top “Add both the CSS and Javascript in order for this to work”. Just my humble opinion. Thanks for the code, very appreciated.
Anna Kurowska
on August 30, 2021 at 11:56 am
Great that it worked! Using the snippets need at least a basic understanding of CSS and JavaScript. We also recommend two articles before you get started with snippets:
If you are not feeling comfortable using the code, check the alternative method, that requires no coding – just install, activate and toggle a switch in a Divi Switch Plugin.
Hi, after hours of searching, trying plugins, I finally have almost got your solution to work. Only problem is that instead of the + symbol I get an L – can’t work out why!
Any suggestions please?
Hi, I used the code and it works fine on mobile, but now the desktop menu is all messed up… Any thoughts? Help is much appreciated.
Thank you otherwise already for great work!
Hi, can you send more information about the issue?
Gregory
on June 4, 2021 at 12:54 pm
Hi, Divi Theme Options does not like the ‘>’ on the css portion of code. Gives ‘special characters must be escaped’. I am assuming it wants to close the signs. Thoughts?
Thank you so much for both of the code snippets, they worked like a charm. It will be great if we could achieve an event listener that could close the upper opened submenu.
For instance saying we have 4 menus and each of it has 2 submenus, when I open second menu, the submenu that it is collapsed, it will close. I really think we can achieve that… It will be of a great help.
Hi luc, can you send me more information about your use case? I don’t understand the issue and your menu(s) structure. We could have it sorted out and adjust the snippet.
Ruud
on May 27, 2021 at 6:00 am
works fine, thank you!
Is it possible to collapse only when pushing the +, and to go to the menuitem when clicked on the menuitem itself?
Currently it does not seem to work with Firefox Android (Firefox iOS works just like Chrome, Safari, Edge, Opera). We can also reproduce the problem also with Firefox windows desktop (small window). Clicking on one of the submenus or “+” closes the complete mobile navigation. Menu items without submenus work. Our Website is linked with our comment. We have also tested some of the other site links from previous comments of other users here (e.g. https://bserver.es/sjd/) and there is the problem as well. Any idea? We use Divi 4.9.4 an PHP 7.4 (right now caching is activated – but problem is the same with all other plugins deactivated).
Hi Anna, thanks for the quick reply. I have changed the CSS (only CSS not Script) but it did not fix the problem. With Firefox Android and Firefox Windows (small window) the problem is still there. Click on menu items with submenus and the navigation closes completely. Additionally, with the new CSS in all browsers, “+” and “x” are now missing to expand and collapse. Therefore, we have currently inserted the “old” CSS again.
Anna Kurowska
on May 6, 2021 at 7:39 am
Okay, thank you, we are investigating the issue further.
Thanks for all your help. I have just embedded and tested the current CSS and javascript above.
Instead of the former “+” and “x” in the menu, it now uses “▼” and” ▲”. Which is fine for us, just differs from the instructions/screenshot in your post here.
The good news first. Now when I use Firefox Android / Firefox Windows (small window) to click on “▼” and”▲”, then I can open the submenu. A progress, this was not possible before in this browsers.
The bad news. The submenu can be opened/closed in all browsers ONLY by “▼” and” ▲”. If you click on the menu item itself (i.e. text/page name in the menu) then the menu closes completely again. We use the Divi function in the theme options to Disable to tier drop-down menu links (navigation). Mabybe this helps reproducing it.
Unfortunately we only have this one website that is online. Since it doesn’t work properly in all browsers now, we had to go back to your old solution.
Dear Anna. Now it works fine in all mobile browsers (Firefox, Chrome, Edge, Opera tested with Android & iOS (+ Safari). Also desktop browsers with minimized window work fine, The menu uses “+” an “x” now again like before. Thank you for your great support.
Anna Kurowska
on May 12, 2021 at 7:37 am
Yaaay! Thank you for quick reply, I am glad everything works!
You have the best tutorial out there for folks. So glad I found you. Even Elegant Themes was awful. Yours was the best.
I can’t believe that nobody calls for a sexy slide on toggle though. Why? Is this not accepted anymore? I can’t stand menus that have a jolt like that. Drives my brain insane.
Hello Anna, could you pls help me out? The menu collapses just fine and could be opened. The only issue is that the ‘+’ icon is missing, so it is. not visible for a user that a menu has submenus. Thank you in advance.
Hi Reni, Icons are visible, but there are some CSS issues on the site and only half width of menu is visible. Make sure menu module has 100% width set or less.
Hello Anna, could you please also help me with my website? doesn’t work for me!
This is the website. I also took it off because it stopped the ability to pages!
Hi Claudia, I am not able to say what can be the issue. Can you tell me where do you put the code?
If you are looking for the plugin method with no coding, check out our Divi Switch Plugin https://wpzone.co/product/divi-switch/
I would love to know if this is possible to use for desktop as well. I have a client who is looking for this click effect rather than hover: https://www.javaworks.ca/
Hi. This is not working for me. I have the same problems as Bryant, who said on April 3, 2020, “This did not work for me. It made it look the way it does in picture but when you try and click to open the sub menu it just closes the entire menu.”
Any chance you can see what’s going on? I have a cutom header I made in the Theme Builder and am using Divi 4.9.0.
Hi Barb, issue you are describing may be related to JavaScript not being loaded on your site. Maybe it wasn’t added correctly. Please refer to our tutorial: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/ If that doesn’t work, let me know if you have any errors in the console log
As Ryan said above, tried to do this after the last update but the parent item doesn’t expand. I added the css to the child’s css file and the script to the child header file.
Hi Brandon, please make sure JS and CSS are loading fine on your site. That was the reason of the issue on Ryan’s site. If that doesn’t let help, send us link to your site! 🙂
Hi, I did write a comment earlier but I dont see it in the comments thread anymore.
Firstly, thanks for all the free tutorials!
For some reason, the parent menu item with the (+) icon, doesn’t collapse when you click it, so the submenu items dont get shown. All that happens is the menu closes.
Please see if you can figure out whats wrong. I’ll be SOOO grateful.
Thanks in advance.
Here’s my website: https://capegen.co.za
Hi! Thanks very much for taking the time to do this tutorial (and all the other ones you guys do).
I am struggling a little bit. I have added the CSS and Jquery in the correct places but for some reason, when I click on the parent menu item (+) icon, it doesn’t collapse to show the submenu items.
I’ll be very happy if you could help me find a solution 🙂 https://capegen.co.za/
It works great thank you. It is possible to add something to have a first level clickable? I have a link page on the first level “travel” here: https://carolinealamy.com/
It works good, but there is a but. I use menu module in the theme builder that is sticky on mobile on the homepage. I have anchor links in the menu, when anchor links are clicked the page scrolls down to the correct section, but the menu does not close automatically. If I then click on the hamburger menu to close it, the page scrolls up again. This behavior is when your script is active only.
Is is possible to have the top level items still link through to their relevant pages when using the mobile menu collapse? Without this, it’s a bit useless for my needs.
Hello, by default vertical navigation on the desktop has already dropdown effect, collapsing items from this snippet wouldn’t work well. Unless you want to get rid of the default effect?
Niso
on August 22, 2020 at 5:54 pm
plugged it in it today 8-22-2020 and works great Thanks
Hey there! This worked exactly like I was looking, but it seems it’s making the parent items have bold text in the mobile menu. I changed the font-weight on line 10 to ‘normal’ and to ‘400’, both to no avail. Any recommendations? Thanks!!
I am more than happy to help! Looking at your site, CSS is not being loaded. Please make sure you have added CSS and it’s added in the proper place. You may find this tutorial helpful https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/
Andy Taylor
on July 22, 2020 at 1:15 pm
Should this work with the Theme Builder Full Width menu?
I’m working on a new clients site at the moment and I’ve tried using the Code (in Custom CSS and Integrations for the Code which I presume is right?) and I’ve also tried using the Divi Switch toggle method too just in case I was missing something, and I don’t get collapsing menus.
The code worked just fine for me. I’m using Divi 4.4.9 at this moment. Thank you very much! And mainly, thanks for keeping the code updated!! This is awesome. Cheers!!!
Thanks for this code, it works perfectly. Is there a way to make the top parents level clickable? I liked you on FB and looked there for the snippet you made for another user, but I didn’t find it. Thank you for your help.
Hello,
I use divi 4.4.7 and the code providet from this page but the menu is not showing the collapsing + on mobile. the rest is working.
Does someone has an idea?
I changed the font size and color but couldn’t work out how to change the font weight to Bold?
I changed font-weight on line 10 from 600 to 800 and even added !important but it hasn’t affected it? Any ideas please?
Anna Kurowska
on April 30, 2020 at 1:21 pm
If you want to change the icon font-weight – it’s not possible in this case 🙂 Simply, ETmodules font from Elegant Themes comes with only one style, it doesn’t support font-weight. Please read more here: https://www.elegantthemes.com/blog/resources/elegant-icon-font
Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!
There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.
Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.
I can’t save the javascript code. i get the spinning wheel but it never saves. Could Wordfence be preventing me from saving the javascript code? How do i solve this problem
There are many methods to add JavaScript to the website: https://wpzone.co/blog/how-to-add-javascript-and-jquery-to-divi/
Where does i have to put the javascript? Is that the reason why the submenu on my page doesnt work?
Yes, JavaScript is required, read our article: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
Thank, it works fine!
Hello, I need some help. I put the codes as shown in the video but my mobile menu is showing only + icons which are not clickable. Like does it work only if I use the default menu? I’m using a custom menu. Please help me.
Website: https://buyofuel.com/
Thank You.
Looks like JavaScript wasn’t added correcty to the website, see our article: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
Awesome tutorial – worked like a charm! Thanks so much!
code is still running fine.
DIVI 4.22.1
WP 6.3.1
Thank you very much
Alexander
I added the snippet. It collapses the menu, but it won’t expand to sub-items. Instead, when I click a menu item it navigates to the page without expanding. https://stivers.com/
I’m having the same issue. How did you resolve it?
Hi How did you fix this issue? and How did you change the chevron icon? Mine is showing letter “L”!
Hi, we have a seperate snippet created to achieve that. This feature is also available in the Divi Switch plugin.
Zohreh, with the performance update ( Divi 4.10.x) by default, the “Dynamic Icons” option is enabled in Divi. If icons in Divi modules on the page are not used, they are not loaded and lead to the display of inappropriate characters, like “L” in your case. You can disable “Dynamic Icons” and it will work again.
You can always load the font with the CSS and that will allow you to enable the “Dynamic Icons” option.
@font-face { font-family: ETmodules; font-display: swap; src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot); src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.ttf) format("truetype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.woff) format("woff"),url(/wp-content/themes/Divi/core/admin/fonts/modules.svg#ETmodules) format("svg"); font-weight: 400; font-style: normal }I can confirm that the code snippet(s) work perfectly on phone & tablet for Divi ver 4.19.2
Thanks for sharing this code.. Finding it made my day.
I added the snippet. It collapses the menu, but it won’t expand to sub items. Instead, when I click a menu item it navigates to the page without expanding.
I checked the site you linked and everything works fine for me. Is the issue resolved or issue happens in a specific browser or device?
Hello , I need some help. I put the codes as shown in the video but my mobile menu is showing only icons and when i click on the icon it loads the parent page. Please help me. Thank You.
Hello, can you send a link to your site?
Hello 🙂
I inputted the code according to the tutorial but the navigation has not changed. Would you mind having a look?
https://ddldesign.co.za/Hello, CSS is not loading on your site, there is syntax issue in your CSS code:
.et_pb_equal_columns>.et_pb_column { margin-top: auto; margin-bottom: auto .et_pb_menu .et_mobile_menu .menu-item-has-children>a,#main-header .et_mobile_menu .menu-item-has-children>a { background-color:transparent; position: relative }is missing the closing semicolon. Change it to:
.et_pb_equal_columns>.et_pb_column { margin-top: auto; margin-bottom: auto } .et_pb_menu .et_mobile_menu .menu-item-has-children>a,#main-header .et_mobile_menu .menu-item-has-children>a { background-color:transparent; position: relative }Thank you so much!! It works now
Hello, 🙂 I have added the code and nothing has changed
I am getting an error in my CSS on line 1 that says Expected RBRACE so not sure if that is relevant.
I have the same issue with the current Divi version, it seems not to be related to the code.
Hi, thanks for the snippet. It is still working perfectly.
Thanks for posting this. Worked great!
Hi there! Trying to enable the collapsible dropdown for our business (on both prices & programs – submenu & 2ndary submenu as well as under parties & groups – submenus). I’ve installed both the CSS and Java and can’t seem to see the difference on mobile devices after trying in excess. Help?
Hi, I checked your site and everything seems working fine on chrome 🙂
Awesome thanks
Excellent!!! Thanks!!!!
I added the CSS and Java script and I don’t see any difference in my mobile menu. Any help would be appreciated. Thanks
Hello, looks like you are using the Fullwidth Menu module. Replace in the code et_pb_menu to et_pb_fullwidth_menu.
The Divi Switch is brilliant.
Hi there, I am not sure if I am doing something wrong but the code does not do anything in version 5.9. Used both CCS and JavaScript as explained, the menu does not collapse on mobile. Thanks!
http://samc45.sg-host.com/
Hi Veronika, CSS is not loading on your site – when I added it through browser inspector, everything is working 🙂
Works fine for me, thx a lot. Clean Divi build.
Hello, thx again for your code, but I have discovered an issue there. How could I make a parent link to be clickable after I open the submenu? For example, I have a parent/sub/children. What should I modify in the code to make my Sub clickable too? Or how could I make only “+” to expand, but the titles to use as links? Thx a lot!
We have a seperate snippet created to achieve that. This feature is also available in the Divi Switch plugin.
Hello! Thank you for this code.
Is there a way to make the whole link clickable, and not only the “+”?
We have a seperate snippet created to achieve that: https://wpzone.co/snippet-category/header-and-navigation/
Hello! It’s working when I use Inspect mode on our website and choose the Iphone X dimension. But when I open it on my phone, the menu is not collapsible anymore
Hi. I just checked it out. Divi theme is not even saving this code. Please help
Hi Basharat, I can’t think about the reason why it doesn’t get saved. You may need to contact Elegant Themes support and maybe they can troubleshoot. Unlikely code is the reason. There are a few ways of adding code to the Divi, so maybe you can try alternative options?
Hi I have tried this on our website but it hasn’t. Any chance you could take a look.
Seems to be working now 🙂
Hi, I wonder if anyone could help?
I tried the solution but unfortunately, I couldn’t expand the child menu, any idea?
Hi, I see the snippet is working fine on your site, the only issue is, it takes above 5 seconds to load the DOM content, and after that JavaScript starts working. More information you can find here about the method used: https://api.jquery.com/ready/
You can consider optimising your site or simply change the first line of the JavaScript that defines when the JavaScirpt is executed.
With the latest performance update (4.10.x) there is a small problem. By default, the “Dynamic Icons” option is enabled in Divi. If otherwise on the page the icons (ETModules) are not used, they are not loaded and lead to the display of inappropriate characters for + and x . You can disable “Dynamic Icons” and it will work again. Maybe the info helps someone. (I think the problem Ajay reports is caused by the divi new options).
Thanks for sharing your solution. You can always load the font with the CSS and that will allow you to enable the “Dynamic Icons” option.
@font-face { font-family: ETmodules; font-display: swap; src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot); src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.ttf) format("truetype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.woff) format("woff"),url(/wp-content/themes/Divi/core/admin/fonts/modules.svg#ETmodules) format("svg"); font-weight: 400; font-style: normal }Re font not loading on chrome, the site is buddhistimages.co.uk. Looks fine on an android phone, but not a google phone…don’t know about iphone…
Can you check the solution provided by Guido and disable the “Dynamic Icons” option from Divi settings or add the CSS provided below
@font-face { font-family: ETmodules; font-display: swap; src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot); src: url(/wp-content/themes/Divi/core/admin/fonts/modules.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.ttf) format("truetype"),url(/wp-content/themes/Divi/core/admin/fonts/modules.woff) format("woff"),url(/wp-content/themes/Divi/core/admin/fonts/modules.svg#ETmodules) format("svg"); font-weight: 400; font-style: normal }I checked your site on Nexus 7 + Chrome and fonts are loading fine. I would need more information to replicate the issue
Many thanks – I found the suggestion from Guido exactly right. I appreciate your time on this
This worked for our site. Thank You!!!
Great!!
Hello. Thank you for this code. I am having the same problem as Guido, the mobile menu works but when I tap on a sub item with a ‘+’ sign it does not open that menu item, but makes the menu close again.
I am testing this using the CSS in the Divi Theme Options, in both Safari and Chrome. I tried using the Javascript in the ‘Head” section of the Integrations tab but that didn’t work at all. I also tried using the code on this page https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/ but neither the Javascript nor the CSS worked for me at all. I did watch your video on how to add Javascript correctly and it was the method I was already using.
Any input you have would be very appreciated. Thank you.
Hi Dawn, you added CSS to your site correctly, but JavaScript is not loading at all. Please read our tutorial: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
Hi, Thank you for the reply. I had previously read that article, and tried the Javascript in the ‘Head’ section of Integrations. That did not work at all. What am I missing from that article… any more specific help you could offer would be appreciated.
Hi again, I just added the Javascript back into the Head area, and left the CSS in place too. That works. I appreciate all your free articles, and your great replies, but I have to say that it was not at all clear from either this page or that other article that BOTH needed to be in place. My understanding from these two resources was either add one method or the other. Perhaps on this page you could say up at the very top “Add both the CSS and Javascript in order for this to work”. Just my humble opinion. Thanks for the code, very appreciated.
Great that it worked! Using the snippets need at least a basic understanding of CSS and JavaScript. We also recommend two articles before you get started with snippets:
– How to Add JavaScript and jQuery to Divi https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
– How to Add CSS to Divi https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/
If you are not feeling comfortable using the code, check the alternative method, that requires no coding – just install, activate and toggle a switch in a Divi Switch Plugin.
Hi, after hours of searching, trying plugins, I finally have almost got your solution to work. Only problem is that instead of the + symbol I get an L – can’t work out why!
Any suggestions please?
Actually, it just seems to be Chrome/google that this happens….
Hi, there must a problem with the fonts not loading. We used icons from Elegant Themes
You can send link to your site and I will take a look
Hi, I used the code and it works fine on mobile, but now the desktop menu is all messed up… Any thoughts? Help is much appreciated.
Thank you otherwise already for great work!
Hi, can you send more information about the issue?
Hi, Divi Theme Options does not like the ‘>’ on the css portion of code. Gives ‘special characters must be escaped’. I am assuming it wants to close the signs. Thoughts?
solved my problem. put css in integration > header section, not custom css in general. Thanks!
Thank you for sharing your solution with everyone.
Thank you so much for both of the code snippets, they worked like a charm. It will be great if we could achieve an event listener that could close the upper opened submenu.
For instance saying we have 4 menus and each of it has 2 submenus, when I open second menu, the submenu that it is collapsed, it will close. I really think we can achieve that… It will be of a great help.
Again thank you very much Anna.
Hi luc, can you send me more information about your use case? I don’t understand the issue and your menu(s) structure. We could have it sorted out and adjust the snippet.
works fine, thank you!
Is it possible to collapse only when pushing the +, and to go to the menuitem when clicked on the menuitem itself?
Check this snippet: https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/
Works perfectly! THANK YOU THANK YOU!!!! 🙂
Hallo,
I insert the code and everything is working only the sub items are not clickable anymore.
Hi, can you send link to your site?
Currently it does not seem to work with Firefox Android (Firefox iOS works just like Chrome, Safari, Edge, Opera). We can also reproduce the problem also with Firefox windows desktop (small window). Clicking on one of the submenus or “+” closes the complete mobile navigation. Menu items without submenus work. Our Website is linked with our comment. We have also tested some of the other site links from previous comments of other users here (e.g. https://bserver.es/sjd/) and there is the problem as well. Any idea? We use Divi 4.9.4 an PHP 7.4 (right now caching is activated – but problem is the same with all other plugins deactivated).
Hi Guido, We updated CSS, can you update it on your site as well and let us know if that fixes the issue?
Hi Anna, thanks for the quick reply. I have changed the CSS (only CSS not Script) but it did not fix the problem. With Firefox Android and Firefox Windows (small window) the problem is still there. Click on menu items with submenus and the navigation closes completely. Additionally, with the new CSS in all browsers, “+” and “x” are now missing to expand and collapse. Therefore, we have currently inserted the “old” CSS again.
Okay, thank you, we are investigating the issue further.
I can also confirm that the “+” is missing. Will keep tracking this for the fix.
We updated code, please let us know if that fixed the issue! If not, please send us link to the site with the current code.
Thanks for all your help. I have just embedded and tested the current CSS and javascript above.
Instead of the former “+” and “x” in the menu, it now uses “▼” and” ▲”. Which is fine for us, just differs from the instructions/screenshot in your post here.
The good news first. Now when I use Firefox Android / Firefox Windows (small window) to click on “▼” and”▲”, then I can open the submenu. A progress, this was not possible before in this browsers.
The bad news. The submenu can be opened/closed in all browsers ONLY by “▼” and” ▲”. If you click on the menu item itself (i.e. text/page name in the menu) then the menu closes completely again. We use the Divi function in the theme options to Disable to tier drop-down menu links (navigation). Mabybe this helps reproducing it.
Unfortunately we only have this one website that is online. Since it doesn’t work properly in all browsers now, we had to go back to your old solution.
Thank you! We updated code, can you check now?
Dear Anna. Now it works fine in all mobile browsers (Firefox, Chrome, Edge, Opera tested with Android & iOS (+ Safari). Also desktop browsers with minimized window work fine, The menu uses “+” an “x” now again like before. Thank you for your great support.
Yaaay! Thank you for quick reply, I am glad everything works!
Hey there, is it possible to add a transition when opening the parent? So it doesn’t open instantly but more smoothly?
Yes sure, you can change the
line and customize effect to your needs. For reference: https://www.w3schools.com/css/css3_transitions.asp
Did you ever get an answer to this? I’ve got the same issue, the transition line doesn’t seem to be doing anything. It’s still opening instantly.
Can you share a link to your site?
Couldn’t be easier. Thank you so much!
You have the best tutorial out there for folks. So glad I found you. Even Elegant Themes was awful. Yours was the best.
I can’t believe that nobody calls for a sexy slide on toggle though. Why? Is this not accepted anymore? I can’t stand menus that have a jolt like that. Drives my brain insane.
Hello Anna, could you pls help me out? The menu collapses just fine and could be opened. The only issue is that the ‘+’ icon is missing, so it is. not visible for a user that a menu has submenus. Thank you in advance.
Hi Reni, Icons are visible, but there are some CSS issues on the site and only half width of menu is visible. Make sure menu module has 100% width set or less.
Hello Anna, could you please also help me with my website? doesn’t work for me!
This is the website. I also took it off because it stopped the ability to pages!
https://loggiadellerondini.com
Hi Claudia, I am not able to say what can be the issue. Can you tell me where do you put the code?
If you are looking for the plugin method with no coding, check out our Divi Switch Plugin https://wpzone.co/product/divi-switch/
I would love to know if this is possible to use for desktop as well. I have a client who is looking for this click effect rather than hover: https://www.javaworks.ca/
This is possible, but unfortunately not with this snippet. I will add to our list for future snippets 🙂
Hi. This is not working for me. I have the same problems as Bryant, who said on April 3, 2020, “This did not work for me. It made it look the way it does in picture but when you try and click to open the sub menu it just closes the entire menu.”
Any chance you can see what’s going on? I have a cutom header I made in the Theme Builder and am using Divi 4.9.0.
Thanks for any help!
Hi Barb, issue you are describing may be related to JavaScript not being loaded on your site. Maybe it wasn’t added correctly. Please refer to our tutorial: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/ If that doesn’t work, let me know if you have any errors in the console log
Hello!
As Ryan said above, tried to do this after the last update but the parent item doesn’t expand. I added the css to the child’s css file and the script to the child header file.
Can’t figure this out. Any thoughts?
Hi Brandon, please make sure JS and CSS are loading fine on your site. That was the reason of the issue on Ryan’s site. If that doesn’t let help, send us link to your site! 🙂
Works Perfectly, my previous code I used stopped working after recent updates.
After hours of searching this did just the job, many thanks.
Hi, I did write a comment earlier but I dont see it in the comments thread anymore.
Firstly, thanks for all the free tutorials!
For some reason, the parent menu item with the (+) icon, doesn’t collapse when you click it, so the submenu items dont get shown. All that happens is the menu closes.
Please see if you can figure out whats wrong. I’ll be SOOO grateful.
Thanks in advance.
Here’s my website: https://capegen.co.za
Hi Ryan, Neither CSS nor JavaScript is added to your site. You can follow our tutorials: How to add JavaScript and jQuery to Divi -> https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
How to add CSS to Divi -> https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/
Hi! Thanks very much for taking the time to do this tutorial (and all the other ones you guys do).
I am struggling a little bit. I have added the CSS and Jquery in the correct places but for some reason, when I click on the parent menu item (+) icon, it doesn’t collapse to show the submenu items.
I’ll be very happy if you could help me find a solution 🙂
https://capegen.co.za/
Where to add this snippet code?
How to Add JavaScript and jQuery to Divi -> https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
How to Add CSS to Divi -> https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/
Hi,
It works great thank you. It is possible to add something to have a first level clickable? I have a link page on the first level “travel” here: https://carolinealamy.com/
Hi Marlene, check this snippet: https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/
It works good, but there is a but. I use menu module in the theme builder that is sticky on mobile on the homepage. I have anchor links in the menu, when anchor links are clicked the page scrolls down to the correct section, but the menu does not close automatically. If I then click on the hamburger menu to close it, the page scrolls up again. This behavior is when your script is active only.
Hi Taulant, can you send a link to the page with this issue?
Works beautifully! Thank you!
Thanks, the code works great!!
Divi version: 4.6.5
Thank you so much it worked like charm! God bless you
Cheers! Enjoy.
Is is possible to have the top level items still link through to their relevant pages when using the mobile menu collapse? Without this, it’s a bit useless for my needs.
Please advise, thanks
Andy 🙂
I agree, it’s useless for me too, because of link not working for top level items. I hope to find a workaround….
thanks anyway for posting this !
Sure! Check this snippet: https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/
Worked like a dream, thank you. I have been trying to find a solution for hours,
Hi Anna,
This solution works very well for the mobile menu. However could you guide me how to achieve the same effect with a custom vertical desktop?
Thanks!
Hello, by default vertical navigation on the desktop has already dropdown effect, collapsing items from this snippet wouldn’t work well. Unless you want to get rid of the default effect?
plugged it in it today 8-22-2020 and works great Thanks
Hey there! This worked exactly like I was looking, but it seems it’s making the parent items have bold text in the mobile menu. I changed the font-weight on line 10 to ‘normal’ and to ‘400’, both to no avail. Any recommendations? Thanks!!
Do you mind sharing a link? 🙂
You should be able to adjust font weight of the parent menu item with:
.et_mobile_menu .menu-item-has-children>a {
font-weight: 400!important;
}
You can find more CSS selectors here:
https://wpzone.co/the-divi-css-and-child-theme-guide/#mobile-menu
Please give me a modified code for full-width menu. It doesn’t work with the full-width menu.
Thanks for letting us know 👍 We will test it and make some changes or we will write a new snippet! 👊
Update your code where it says “.et_pb_menu” with “.et_pb_fullwidth_menu” to make this work on the full-width menu 😉
Mehedi, I have updated the code. Let us know if it works now 🙂
Code works on Version: 4.5.6 with menu built with Divi theme builder – great thanks
Great Sam! 🙂
Dear Anna,
I just try to make this on my site, but some error I have. The submenus are not collapsed..
Under this page: https://chocofacture.com/teszt-webshop-keresos/
Can U help me in this case?
Kind Regards
Marci
I am more than happy to help! Looking at your site, CSS is not being loaded. Please make sure you have added CSS and it’s added in the proper place. You may find this tutorial helpful https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/
Should this work with the Theme Builder Full Width menu?
I’m working on a new clients site at the moment and I’ve tried using the Code (in Custom CSS and Integrations for the Code which I presume is right?) and I’ve also tried using the Divi Switch toggle method too just in case I was missing something, and I don’t get collapsing menus.
Any help would be most welcome.
Thanks 🙂
The code worked just fine for me. I’m using Divi 4.4.9 at this moment. Thank you very much! And mainly, thanks for keeping the code updated!! This is awesome. Cheers!!!
Thanks for this code, it works perfectly. Is there a way to make the top parents level clickable? I liked you on FB and looked there for the snippet you made for another user, but I didn’t find it. Thank you for your help.
Sure! Check this snippet: https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/
Hello,
I use divi 4.4.7 and the code providet from this page but the menu is not showing the collapsing + on mobile. the rest is working.
Does someone has an idea?
Hi Matthias, is your menu multilevel (does it include submenu items)?
Hello Anna,
yes it does but somehome the whole theme is messed up. I have to reinstall everything first.
will come back after that
I rebuild it with new website and now it is working.
Just added this to a site of mine and works great thank you. What css could I add to increase the weight & color of the opening ‘+’ please?
Happy to hear that! To change the icon size, change the font-size in the Code Snippet.
CSS, line 15.
font-size: 18px;
Thanks for your swift reply Anna 🙂
I changed the font size and color but couldn’t work out how to change the font weight to Bold?
I changed font-weight on line 10 from 600 to 800 and even added !important but it hasn’t affected it? Any ideas please?
If you want to change the icon font-weight – it’s not possible in this case 🙂 Simply, ETmodules font from Elegant Themes comes with only one style, it doesn’t support font-weight. Please read more here: https://www.elegantthemes.com/blog/resources/elegant-icon-font
No worries, thanks Anna.
BTW icons 43 & 44 work well for the menu too 🙂
Thanks for this code, it works perfectly. But is there a way to make the top parents level clickable?
We can create a new snippet for this 🙂 Make sure you like us on Facebook so you won’t miss it!
Hi Seun, we created a new snippet to make the top parents level clickable 🙂 https://wpzone.co/wordpress-and-divi-code-snippets/divi-mobile-collapse-submenus-with-clickable-parent-menu-items/
Works well with Theme Builder > Global/Custom Header. Using 4.4.2; Flywheel’s Local PHP 7.3.5.
The Headers do not work to my satisfaction, however – that’s a completely separate issue.
How can this be modified for the Nav Menu Widget?
You would need to use different classes. We can create a new snippet for this 🙂 Make sure you like us on Facebook so you won’t miss it!
Works perfectly! Thank you!
You may prefer this method: https://gist.github.com/Garconis/a3855dbd7bfb7eeaebe1601d11b33979
This did not work for me. It made it look the way it does in picture but when you try and click to open the sub menu it just closes the entire menu.
Hi Bryant, send link to your site, we’ll take a look 🙂
This is the site. I took it off because it stopped the ability to go to the pages in sub menu.
https://renewpensacolapt.com
Bryant, I updated the code, everything should be working now 🙂
That fixed it! Thank you!