Divi Mobile Menu Hack: Collapsing Nested Menu Items – Divi Nation Short

Posted on May 20, 2016 by in Community | 135 comments

Divi Mobile Menu Hack: Collapsing Nested Menu Items – Divi Nation Short

Do you have 30 seconds to improve your Divi mobile menu? If so, then you’re going to love today’s Divi Nation Short. In it I’m going to show you how to collapse nested menu items so that mobile visitors can navigate large and/or busy mobile menus more easily.

Divi Mobile Menu Hack: Collapsing Nested Sub Menu Items

In this Divi Quick Tip I’ll be sharing with you a simple but very useful Divi Mobile Menu hack that allows you to collapse nested menu items, making your mobile menu more manageable for your mobile visitors.

If you have any questions about this hack (or anything that I cover in this video) I’d be happy to help in the comments section below.

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Collapse Nested Sub Menu Items on Divi’s Mobile Menu


A standard Divi mobile menu

The image above shows what a normal Divi mobil menu looks like. As you can see, the nested items are expanded so that everything is visible. However, if you have several parent menu items with several sub menu items each, your mobile menu may start to become rather cumbersome and difficult to navigate.

What this Divi mobile menu hack is going to do is allow you to collapse those nested items so that mobile visitors can quickly locate the parent item they want before seeing the expanded options beneath it.

To accomplish this, copy the code snippet below:

<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }

Then, navigate to Divi Theme Options > Integrations > Add code to the body. Paste the above code into that text box.

Paste this snippet directly beneath it:

<script type="text/javascript">
(function($) {
	function setup_collapsible_submenus() {
		var $menu = $('#mobile_menu'),
			top_level_link = '#mobile_menu .menu-item-has-children > a';
		$menu.find('a').each(function() {
			if ( $(this).is(top_level_link) ) {
				$(this).attr('href', '#');
			if ( ! $(this).siblings('.sub-menu').length ) {
				$(this).on('click', function(event) {
			} else {
				$(this).on('click', function(event) {
	$(window).load(function() {
		setTimeout(function() {
		}, 700);


When you’re finished, click the Save Changes button. Now, when you refresh on the front end you should have a mobile menu that looks like the images below.


Our new collapsed mobile menu


Our new mobile menu expanded one level.


Our new mobile menu expanded two levels.

Note: if for some reason your menu doesn’t look like the menus in the above examples, try pasting the code from these links instead where it says “raw paste data”–css snippet, javascript snippet.

Additionally, if you decide that you’d like different icons in your dropdown menu you can use the codes in this post to change the “+” and “x” icons to whatever you’d like! All you have to do is swap out the last few characters of the icon codes in the reference post for the codes in the CSS snippet above where it says

content: '\4c';


content: '\4d';


Do You Have A Divi Quick Tip Request?

I really love creating these Quick Tips for the Divi Community and I’d like to thank everyone who has submitted a request in the comments, via Facebook, or by email.

If you have a request of your own please leave it in the comments below. I put each request in a running list of future Quick Tips and I’m excited to say that we’re starting to generate quite the queue!

So much so in fact that we’re taking steps to make it possible for us to create a new Divi Quick Tip every day in the near future. So keep those requests coming!

Premade Layouts

Check Out These Related Posts


  1. Nice! Thanks for the code and tutorial. I will definitely be using this on my Divi sites. I just checked a site I made with Extra and it does this already. Is this code a default setting for Extra?

  2. Sweet tip. Done on my sites.

  3. Hello everybody,

    Thank you very much for posting!
    Inserted that code with ease.
    Looks good – BUT: my parent items are not clickable.
    What am I doing wrong. My menu is so long I really need some work on that issue!

    Can you give my some support with this?
    Thank you!


    • It’s actually one or the other. If the parent menu item is clickable as a link to something else then that tap/click won’t open it up to reveal the nested items.

      • So how do you create a non-linkable menu item? I made a custom link and used # for the menu item url, but it’s still not collapsing in mobile.

        • Maybe it’s because I’m using a Fullwidth Menu Module. Maybe it has something to do with my custom css rules for my menu, but I give up. It’s not working for me. Like others in this thread, I see the + sign but on mobile, clicking on it does not make it collapse. It just remains stubbornly open. Would be nice if this feature came in DIVI.

          • Hey John,

            If the hack doesn’t work with your site it’s probably because of something specific to you site as you’ve said. Please create a ticket in our support forum and see if we can’t help you figure out what’s going on.




          • I’ve updated the post above with some new snippets. I’ve also included some links that should help with the top tier staying active issue you’re having. You’ll want to make sure you use the “raw data paste” option I mention in the post above.

        • In Divi > Theme Options > Navigation > General Settings you can choose to disable top tier dropdown menu links.

  4. Awesome tip Nathan πŸ™‚
    Looking forward to get these Divi quick tips daily

  5. That’s fabulous! I tried it right away and it’s much better. The only issue is if there’s another tier of menus. The 3rd tier is fully explanded in mobile view, although the 2nd tier has the ‘plus sign’ icon. That plus icon doesn’t work though..

    Can you adjust the code to help with this?


    • Great hack. I experienced the same result as Marcus, so if there’s a way to get the tier 2 plus sign working and tier 3 closed until tier 2 is opened — so much the better.

      • I saw the edit to the code snipet (below) for tier 2 & 3 — but it did not work for me, additionally, the tier 1s with plus signs don’t link to their respective pages.

        Any thoughts?

    • Hi Marcus, I’ve updated the snippets above to expand for multiple sub menu levels. You can also change the “+” symbol to something else if you’d like πŸ™‚

      • Hi Nathan, i can’t see your new snippets at the post… Where are exactly that code to collapse 2/3 submenu levels?

        Thank ypu!

        • I’ve replaced the old snippets with updated ones. All you need to do is delete the old snippet from your integrations section and follow the post instructions again.

          • Thanks Nathan for your quickly response, but i did it and http://www.hititu.com from a mobile doesn’t collapse the sublevels…

            so what’s wrong?

            • Two things:

              1. Make sure that if you are using a caching plugin that you have cleared the cache.

              2. Try using the pastebin links I provided in the link and copy your code directly from their “raw paste data” box.

              If this does not work then there is likely something conflicting with this code on your website. At that point you would need to create a ticket so our support staff can help you out.

              • Thanks Nathan i’m going to check it!

                i hope it works!

  6. This should be a theme default right???

    • Yes I agree with that – if it’s been often requested, please make it a default… BUT optional so that if anyone wants to keep the top tier of sub-pages as a clickable link they have the chance to do so.

      Great tip… as long as you plan your menu well πŸ™‚

  7. Thanks for the post! Would you be willing to add some instructions for increasing the size of the “+”?

    • Okay Chad and the rest of the people here this is how you can easily change just the size of + in the mobile menu:

      Change this:

      .et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; }

      To This:

      .et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; font-size:26px;}

  8. Thanks for this Nathan, love watching Divi Nation video’s, I’m a lifetime member of Elegant Themes and use nothing but the Divi theme when designing websites. Do you happen to know if upcoming versions of Divi will have some of the design elements as well as some functions that EXTRA has?

    • I’m afraid I can’t be super specific in my answer, but yes. The goal is to eventually have a closer parity between Divi and Extra features.

  9. This is a great hack. I also curious if we could choose different navigation style for Desktop and Mobile menu. Like I want to have defualt navigation for Desktop navigation and for Mobile I want to have the Full Screen one. I think Divi should have more flexible way to set these things. etc, the blog archive should have both Blog and Grid style. I don’t know why but you guys already have blog module with grid style but not allow it for defualt blog template. Would be good if we can have more choices.

    • I agree with Emily, that would be a great feature – I also agree that this hack should have been a menu feature from the very beginning. I consider it an oversight since most mobile menus (every other one I have seen, in fact) do this.

      Nice to have this hack though. Thank you!

    • That can be done but requires customization using CSS to hide the default mobile. Have you considered submitting a support ticket to inquire on this?

  10. Now if you could also do this for sidebars that would be great.

  11. Hi Nathan!

    I added the code as directed, and my mobile shows the plus sign, but the menu will not collapse.

    I have code in the field above , and I thought perhaps there might be a code conflict. I tried to post the code here in the comments, but it would not let me. I gave me a 404 page.

    Any ideas?


    • Hey Howard,

      It’s hard to say what the issue might be without being able to get in there and see what’s happening. I think our best bet for resolving your issue is for you to create a ticket in our support forum so we can look at your specific install and what might be happening there.




      • Very well, Nathan!

        I have lots of experience with that! Haha!

        • I’ve updated the post summary above with new snippets and links to those same snippets hosted on pastebin. Might be worth trying to paste them using the “raw data paste” option there.

          • Thanks, Nathan!

            I must be blind because I cannot find where it says “paste raw data.”

            • Okay, I found it and pasted it, but it still does not work. I am always the problem child. πŸ˜›

  12. Thanks, but code not work with “Mega Menu”
    /* Mega Menu */
    #top-menu li.mega-menu….

    how to integrate this “+” fot 3-th level of “Mega Menu” ?

    • Hi Alex, I’ve updated the summary section above with new snippets that work with mega menus and more dropdown tiers πŸ™‚

  13. Awesome, I just update my site with this. Great tip! Thanks for sharing!!

    • Great to hear Charles! You may want to try the updated snippets in the post above. It’ll do the same thing as the original snippet but allow for use with more drop down tiers and mega menus.

  14. Nice, but this one, the parent menu are not clickable. So still be great if it is..

    • Yes the parent link remaining clickable is a tough one. Personally I would recommend disabling your top tier parent links altogether. That will solve the issue of them being active when in desktop and inactive on mobile. Simply place everything in the child element tiers.

      You can do this by going to Divi > Theme Options > Navigation > General Settings.

      • I didn’t even know that was an option! I always just do a custom link “#” then delete it!

        Looks like I got a bonus tip on this post! πŸ™‚ Thanks!

  15. The Code Integration field does not allow me to paste code. Any clues?

    • ok added code to body text box and the + signs appear but the sub menus won’t collapse.

      • Try pasting the code snippets using the new links I’ve included above to pastepin. Use the “raw data paste” option.

  16. hello

    all is ok.

    but how to bring up this mobile menu on ipad ?

    thank you

  17. Great article and a great tip. I also have a structured menu with 3 layers rather than just a sub-menu. It’s actually the third tier where most of the links are and they still remain fully open. It would be super cool if that could be fixed……? 😎

    • I have the same problem. Another downside is that parent items are no longer clickable. Good in theory though.

      • I have this issue too, with the parent links – so I guess if it’s a massive site with large menus, some careful planning will be needed – a step in the right direction though πŸ™‚

    • Hi John, the summary section of the post above has been updated to resolve this issue πŸ™‚

  18. Hi Nathan,

    Nice hack! I’ve wanted something like this for quite a while. But I notice that it works for my friend who has an iPhone 6S, and it doesn’t work on my iPhone, which is a 5C. My phone continues to show a long list of menu items instead of the nested version. Any idea why? (Both phones are up-to-date, BTW.)

    Best wishes and appreciation.

    • Well, my phone made a liar out of me. I’d emptied my history and cache and was still seeing the full menu…until a half hour later when the nested version appeared. So it does work on my 5C.

      However, like others I still see one issue. One of my top level links drops down to a mega-menu, and this mega-menu appears fully open, not nested. Other than that, it’s a really nice hack. Thank you again!

  19. Lifetime member here. Love the blog posts. Of all the resources I subscribe to, I lol forward to ET’s the most.

    Love that with Divi and some custom CSS (and custom php) each site I create has its own child theme that looks and operates uniquely for each client and thier audience.

  20. Thanks for the code. The only problem I can see is that from the trial I made of the code, the parent are no longer linked and can only open the sub-menu. For my site, the parent is also a link to a page. Is there a way to fix this?

    Thanks again πŸ™‚

    • Keeping parent links active on mobile is a usability issue. Creates a lot of “fat finger” issues when it comes to expanding sub menus. My recommendation would be to disable top tier menu links altogether and put everything in various dropdown menu tiers.

      The updated snippets above work with multiple dropdown tiers and mega menus. To disable your top tier items go to Divi > Theme Options > Navigation > General Settings.

  21. Worked great on the top level menus. But I have another sub menu under a top level menu and it is acting weird there. It expands it by default and clicking the + sign doesn’t collapse it.

    • I’ve updated the snippets above to address this issue.

  22. I leeft this comment earleir today but it never appeared, so I thought I’d try again.

    Thanks but this still doesn’t solve the flaw that exists in mobile menus ofr Divi & Extra. I too build ALL my clients’ sites with Divi or Extra, but the mobile menu issue is nearly a dealbreaker. I have posted this in the forum & got no help on it. If you go here you’ll see the desktop menu: http://hypnosishealthinfo.com/ then look at it on a mobile device & you can’t access hardly any of the most important pages because they all have sub pages and are NOT clickable on mobile. This destroys the usefulness of the site. PLEASE figure out HT make all pages clickable on mobile!!! Thanks!

  23. HI, Great hack.

    Like many others, My parent link is not clickable anymore.
    I am using mega menu function.

    Please solve this issue =)

    • Hi Joel,

      I’ve updated the code snippets so that they work with multiple drop down tiers and mega menus. As for the parent menu item issue, please see my response to the comment above this.



  24. Thanks for the tip Nathan, updated my site without a problem.

    • Good to hear Rob! You may still be interested in checking out the updated code snippets in the post above though πŸ™‚

  25. Great! It works but only for 1 submenu level. I have 2 levels and this code doesn’t collapse it…

    Any solution?

    • The snippets in the post above have been updated to resolve this πŸ™‚

  26. Thanks for great tips! I use this!

    I would like to ask the hack main menu or top menu woocommerce search.

    Other WooCommerce search short code use (third party plugin), main or top menu or header?

  27. Hi Nathan,

    Thanks for sharing this, I’ll be implementing it for sure, and hopefully it can be an option baked into future versions of Divi.

    Related to this somewhat, I’d love to see a Divi Quick Tip or other instruction on how to relatively quickly make a “Priority Plus” navigation menu in Divi instead of the usual hamburger/dropdown list mobile menu, where, as your menu bar adjusts to narrower screen widths, the lower-priority/right-most menu items fall under a “More…” dropdown, such as described here:


    I’m not a developer, and haven’t really had the time to hack away to try to make the examples show there work, but suppose it could be done with just CSS, using a series of media queries and hiding/showing the ‘More’ and then for its dropdown hiding/showing sub menu items as more of those need to appear, but if there’s a better way to do it (not sure whether that’s the best way for accessibity or not, for example), would love to see it featured.

    Thanks, and please keep up the great community interaction.

    • I’m a fan of the “more” “less” approach in the example you linked to. I’ll be showing something similar to that in my next Divi Quick Tip πŸ™‚

  28. Hi, great tip, will use it. Could you create a code, so when you tilt the ipad to landscape, there would still be the hamburger menu instead of a regular menu. It’s a problem when you have a lot of menu items. Would really appreciate it πŸ™‚

    • Found it in the forum, thanks anyway. You guys rock ?

    • Great! Glad you found what you were looking for.

  29. Hi Nathan – I have the same issue with code pasted successfully and plus signs appearing, but the menu remains expanded on mobile.

    • I’ve updated the post so that you can get the code snippets directly from pastebin using their “raw data paste” option. Should resolve this issue.

      • Still not managing with this. I copied from pastebin as recommended but now it just stays open and don’t now get the crosses. I deleted the cache on my mobile phone but still nothing there. In General settings Top tier down menus are disabled and were.

  30. Muchas Gracias from Spain!!!

  31. Very nice article! I could almost use this hack on my sites, but as someone previously mentioned, it won’t really work on mega menus nor will it work on dropdown menus where the top link is active (takes you to a page).

    What I would really love to see would be an option to create a menu just for mobile devices. Maybe add a check option in the menus area (like you have for primary, secondary, footer) for a mobile menu. So that the menu designated the mobile menu will be displayed instead of the primary & secondary menus. Just a thought πŸ™‚

    Thanks again for making a great theme!

    • Hi Brian,

      I’ve updated the post above with snippets that work with multiple drop down tiers and mega menus. Hope it helps!



  32. You guys are getting closer to fixing this issue but this hack still leaves quite a bit to be desired. One quick fix for those of you with multiple nested menus (which is pretty much every site out there these days)…you are going to want to update this code by using top_level_link = ‘.menu-item-has-children > a’; This will allow you to collapse all of your nested menus and not just the first parents.

    • On a related note @Nathan…can you provide a fix where the mobile nav menu closes when the menu button is pressed again? Right now the menu won’t close unless you click on a menu link.

      • Sorry…caching issue with latest Divi update.

    • Mike, can you please elaborate on this. What exactly needs to be replaced with what?

      • Clint,

        change this row:

        top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;

        this is:

        top_level_link = ‘.menu-item-has-children > a’;

        • Thanks so much!! Works great now!

          • didn’t work 4 me

    • The post above has been updated with snippets that work with mega menus and multiple drop down tiers.

  33. I was so excited to see this post pop up in my feed but that excitement was quickly dashed when I implemented it and found:

    1. Parent menu items are no longer clickable
    2. Second level parent items do not collapse

    Here’s to hoping someone finds a fix.

    • Hi Brick,

      We’ve resolved the multiple drop down menu tiers issue. See the post above for updated snippets.

      As for the parent link issue, that’s more of a mobile usability issue. If the top tier parent items are active on mobile while child element are collapsed it creates a situation in which “fat finger” navigation errors are very easy to make.

      I would recommend disabling top tier menu links altogether and configuring your menus accordingly. This way switching from desktop to mobile won’t change anything and the hack above will be even more useful.

      You can do this by going to Divi > Theme Options > Navigation > General Settings



  34. Hi Nathan – I have the same issue with code pasted successfully and plus signs appearing, but the menu remains expanded on mobile.

    • Hey Peter, check out the updated post above. You may want to take advantage of the pastebin links I’ve provided so that you can use their “raw data paste” option.

  35. Waiting for a long time, finally I can do, Thank you

  36. Would be nice to have the other nested submenu levels collapsed as well, other than the first level I mean, which now works great.

    • Good news Siaki, we’ve updated the snippets above so that this is possible πŸ™‚

      • Thanks Nathan, updated the sites and now it is much much better! Cheers πŸ™‚

  37. I have in the main menu link categories, and it did not work code


    • Hi James, we’ve since updated the code snippets in the post above. You might want to try again and see if it works. I’d also recommend taking advantage of the pastebin links I provided so you can use their “raw data paste” option.

  38. Wow.. its really awesome. I am using this. πŸ™‚

  39. Thank you very much for this very usable trick. I had to temporarily disable the Wordfence-Plugin to be able to save the changes. After that it worked perfectly.


  40. hi,

    I used the code, it does work, but 3rd level menu items are standard open and cannot be closed

    • We’ve updated the code snippets above to resolve this issue.

  41. Love this hack, just what i needed to clean up mobile menus.

    Is there an equivalent hack for hiding the submenu items on mobile completely and just have the parent menus items listed and clickable?

    • Hmm. I’ll have to look into it. May make another good quick tip in the future.

  42. Many thanks. This is a great addition, particularly with Szabolcs modification.

    A small nit to pic: is it possible to change the “+” to a “-” when the sub-menu is open?

    • I’ve updated the post with new snippets and instructions on how to change the symbols.

      • Many thanks, Nathan. Works a treat!

  43. This is an awesome tutorial! As people have said though, it doesn’t work completely with mega menus. Is there any way this tut can be updated with a how-to for that?

    • We’ve updated the snippets in the post to work with mega menus. Hope it helps!

      • Thanks Nathan! Really appreciate it. Works perfectly!

  44. To be clear — if you replace the line:

    top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;


    top_level_link = ‘.et_mobile_menu .menu-item-has-children > a’;

    The revised code allows both tier 1 and 2 menu items with siblings to open and close, using “+” sign.

    Perhaps someone can figure out how to revise it further, so that tier 1 & 2 menu items with siblings can also open their respective links. The reason why it doesn’t open the link now is this line: $(this).attr(‘href’, ‘#’); where the # is setting the href to top of page, essentially does nothing.

    I have opened a ticket with ET for assistance.

  45. This is great! Is there anyway to collapse the sub menu items in the vertical menu instead of having them expand into a dropdown to the right of the sidebar? This is a real problem, even on desktops, when you have a lot of submenu items.

    • Hey Bryan, I’ll have to look into it. Might be another divi quick tip in the future.

  46. Thanks so much! This was just what I needed. I have mega menus on my site that buried important items from my secondary header menu (directions, maps, donate, etc) at the bottom of my mobile menu. This solved my problem!

  47. Looking forward to more Mobile Menu functionality built into Divi that I don’t have to hack, but this did work beautifully!

  48. Thank you so much for a wonderful menu hack! Cheers!

  49. Thanks Guys

    Been trying to figure this out since forever!!

  50. Hi Nathan,

    Just a heads up in case anyone else encounters this issue. Using the code as-is on my site produced a situation where the “+” symbol only appeared on the top most Home link (which had no sub-menus) and not on any of the appropriate top-tier menu items. It was a simple fix though, just had to remove a single CSS selector declaration property…

    #main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; top: 13px; right: 10px; }

    Fixed (for my site:
    #main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; right: 10px; }

    I just remove the “top: 13px;” and it worked perfectly! Thanks, Nathan!!

  51. Just what I needed thanks for this πŸ™‚

  52. Thanks for this awesome hack, do you have something similar that can be applied to the desktop version?

    We have a woocommerce site through divi with 12 parent catergories and over 40 subcategories, it would be ideal to have the sub menu as collapsing nested menu items.

  53. Hmm. Any idea how to do this for a full width menu module? This only applies to main menus.


  54. Hello, would it be possible to adapt this collapsible menu to a normal website not only for monile menu?

  55. It is not work anymore? for me It doen’t open the sub menu πŸ™

  56. Thanks for the Code. Works like charm. Solved the problem. πŸ™‚

  57. Thanks for the post!

    I work, but the icon is different, as I can fix it?

    • sebastiΓ‘n, We were having the same icon chaning issue too where a + started to look like <O

      I noticed the code above has this in it…

      content: '\4c';
      content: '\4d';

      Somehow our site removed those slashes. If I added them back in I got the + back. Hopefully it will stick this time. I put in a ticket just in case it's something with the code.

  58. The icon keep changing from a + to <O with a hamburger icon inside the O. How do we fix this? Thanks.

Join To Download Today

Pin It on Pinterest