Collapse/Show Mobile Menu in Divi theme
Divi Theme
2017-09-04
by Javed Iqbal

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.

About Javed Iqbal

Mr. Javed Iqbal is a senior php developer and co-founder at MZ Creative Studio. His experience is more than 8 years in this field. He loves working on challenging projects.

81 thoughts on “How to Collapse/Show Mobile Menu in Divi theme”

      1. 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 🙂

        Reply

        1. 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.

          Reply

  2. This is awesome, thanks for sharing the code! What if you only want one child menu open at a time?

    Reply

    1. im thinking the same thing. is it still possible to collapse other child menu while selecting other child menu?

      Reply

  4. 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

    Reply

    1. 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

      Reply

  7. 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.

    Reply

    1. 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!

      Reply

    1. 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.

      Reply

  12. 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.

    Reply

  13. 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;
    }

    Reply

  17. 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???

    Reply

  19. 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!!!

    Reply

  20. 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.

    Reply

  21. 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.

    Reply

      1. 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

        Reply

        1. 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!

          Reply

  23. 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! 🙂

    Reply

  24. 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

    Reply

  25. 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

    Reply

  26. 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! 😀

    Reply

  28. 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

    Reply

  29. 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?

    Reply

  30. 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?

    Reply

  31. 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?

    Reply

  32. Brilliant. Worked perfectly on first attempt even with a custom-placed mobile menu. Great stuff and thank you!

    Reply

  33. Thank you for this code, tried several other variations before finding this one which worked straight away

    Reply

  36. 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.

    Reply

  37. 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.

    Reply

  38. 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!

    Reply

    1. 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!

      Reply

  41. 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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Do you have a website project you’d like to discuss?

Get in touch