Collapse/Show Mobile Menu in Divi theme

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 Zahid Iqbal

Zahid Iqbal is a founder and ceo of MZ Creative Studio. He is a web developer and designer with over 3 years of experience. His mission is to provide best web services and useful tools to everyone round the globe.

56 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 🙂

        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.

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

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

    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

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

    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!

    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.

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

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

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

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

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

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

      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

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

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

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

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

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

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

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