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.

span.menu-closed:before {
    content: "\4c";
    display: block;
    color: #fff;
    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’s 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.

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

Leave a Reply

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

Offer Your Website Project to MZ Team.

Let's talk