How To Collapse Divi Mobile Menu Submenus Tutorial by Pee Aye Creative

How To Collapse Divi Mobile Menu Submenus

Nelson Miller Pee Aye Creative
In this tutorial I will show you the best and easiest way to collapse the Divi mobile menu submenus and add toggle icons that look great!

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.3

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add Some jQuery To Collapse The Divi Mobile Menu Submenus

The idea here is to change the Divi mobile menu from a boring, expanded list to a beautiful compact list. We can do this by adding some jQuery and CSS code. This will not only collapse the mobile Divi menu submenu, but also will add some nice toggles that can be used to indicate to the user that there are more items to show and where to click. This tutorial comes in two parts, one for each type of code. Both of them work together and both are needed to make it work.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script >
    jQuery(function($) {
        $(document).ready(function() {
            $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
            $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function(event) {
                event.preventDefault();
                $(this).parent('li').toggleClass('dt-open');
                $(this).parent('li').find('ul.children').first().toggleClass('visible');
                $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
            });
            iconFINAL = 'P';
            $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
            $('.mobile-toggle').on('mouseover', function() {
                $(this).parent().addClass('is-hover');
            }).on('mouseout', function() {
                $(this).parent().removeClass('is-hover');
            })
        });
    }); 
</script>

2. Add Some CSS To Collapse The Divi Mobile Menu Submenus

The next step is to add the corresponding CSS code. This code works alongside the jQuery, and together they create the Divi mobile menu collapsed effect.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #00d263;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}


/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}

As you can see, each of the snippets are labeled. This does a good job of explaining what each one does. As always, feel free to customize anything like colors and sizes. 

Option: Use Parent Menu Item As Toggle For Submenu

This seems to be a big question in the comment section, so I am adding the answer here. If you want to essentially remove the parent menu item link and use it as the same toggle mechanism as the dropdown icon. Instead of linking to that page, it will be used only as placeholder text and a toggle.

<script>
jQuery(document).ready(function(){
jQuery(".et_mobile_menu .menu-item-has-children a").each(function(){
jQuery(this).click(function(event){
event.preventDefault();
jQuery(".et_mobile_menu").toggleClass("pa-block");

jQuery(this).siblings("ul").toggleClass("pa-submenu");
})
})
})
</script>
.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}

.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}

.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
    	    text-align: right;
    	    width: 100%;
    }

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.3

Related Tutorials To Help With The Divi Mobile Menu

In our video and tutorial, we are using some code to help the mobile menu look better. This all comes from our Divi Menu tutorial series! I recommend checking out those other tutorials for lots of helpful and fun stuff!

Last updated Oct 9, 2023 @ 11:10 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

358 Comments

      • Hanno

        Hi Nelson,
        Tried your solution and it works … only once
        Not sure why but the first moment I check on my mobile it works and 5 minutes later, it doesn’t. It’s frustrating. Any idea why? More importantly: what do I need to do to make this a permanent solution?
        Thanks, Hanno

      • Hanno

        Once I refresh my browser the menu shows the old uncollapsed menu. But if I press Save changes in Divi Options, it works for another minute

  1. Achmed

    Hi Nelson, thank you for the snippet!

    I have a small problem, i see 2 arrows instead of one. how is this possible ?

    Thanks!

    Reply
      • brad

        how do you fix it?

      • Hemant Gaba

        Hi Brad!

        We can see the issue is resolved now from Divi end. Can you please share the URL of the page so that I can check further?

  2. Santiago Demierre

    Hello friend, I have a lot of tutorials.
    I have a large menu on my website and when I want to see the names of the menu that are below, I can’t keep going down. Do you know how to solve that? Thank you very much

    Reply
      • Santiago Demierre

        http://cirfaa.org.ar/

        When I scroll the menu and the menu is longer than the screen I can’t keep going down and see the menu that follows. It is difficult to explain, but if you open this site with your cell phone and open all the + you will see that once the menu occupies more space than the size of the screen you cannot continue to see the ones below.
        Thanks for answering!!

  3. Benny

    Great Tutorial… you’re the first one with this kind of tutorial where the collapsible mobile menu is working too if a mega menu is in use! Well done Nelson… really well done. Thanks for this

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Nice! I looked at all of them before posting and kind of took the best of all of them and made this, so glad to hear it is working for mega menus too!

      Reply
  4. Robertina Varga

    i sort of works but it has so many problems with it, i will just delete it. thanks for tying tough 😉

    Reply
      • anx

        Hi Nelson
        My menu has multiple levels of submenus, how can these submenus also be folded and opened?

        thanks

  5. Pär

    Hi Nelson,
    thank you for a great post!
    I also have the problem with 2 arrows instead of one. Do you have a solution to the problem?
    Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Pär,
      I answered this in the other comment, it sounds like Divi is just stripping out the forward slash \ in the code before the icon number. So just make sure when you paste the code, it remains there or add it back.

      Reply
      • Pär

        Thank you for your reply! I am sorry for being stupid, but I cannot find forward slash \ in the above code either? So I do not really know where to start?

      • Mario Brumen

        Add forward slash before the number: Example: content: ‘\33’;

      • Ernesto

        Hello Par, you need to update this line

        /*submenu toggle icon when open*/
        
        ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
        .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
        	content: '\32';
        }
        
  6. Robin Jones

    Hi Nelson,
    Thank you very much for this. With the forward slash correction, works a treat. However, I note that the dropdowns only show when you click the actual arrows. Clicking the section title just closes down the menu. Setting ‘Disable top tier dropdown menu links’ on theme options should stop that being a link, I thought. I checked your own site and works the same. Click Store and the page just reloads. You have to click the actual arrow to get the dropdown. Any ideas?Salut, Robin

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Robin,
      That works as expected though. In other words, nothing is wrong with it, but if you want, you can certainly experiment changing it. I want people to be able to click to those pages, but if those parent links are not links, like in the menu, then just don’t set the links…set a # and then when it is added, remove it, and it won’t click.

      Reply
      • Robin Jones

        Nelson, logical thinking, thanks.

      • Francisco

        Hi Nelson, Your site is fantastic, thank you very much.
        One question, can you make it so that I can click on the submenu text and it also opens and closes, without having to necessarily click right on the icon?
        Even if the text is not a link it always acts closing the whole menu instead of opening or closing the submenu toggle. Can you think of any ideas to modify?
        I’ve implemented it on https://franciscojoss5.sg-host.com/ (still under construction).
        THANK YOU!!!

  7. Nicolas Leoni

    Fantastic! this code works perfectly in my website, thank you very much!

    Reply
  8. Phil Simon

    Great tutorial, but I’m having a hard time getting it to work. Right now, it’s on my staging site. I’m happy to give you the link. Maybe, though, you know what’s up by the video/link/ Thanks!

    Reply
  9. Christian Gabriel Rosales Nunez

    I have only been using DIVI for a few months and your posts have helped me a lot before I made the decision to buy some plugins. While it is true that many are necessary, savings on simple things are always welcome. Best regards from Chile.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Christian,
      Nice to meet you, I’m so glad my posts have helped! Yes, there are times for code, and times for plugins. Thankfully we all have options! 🙂

      Reply
  10. ECDJ

    Seems like the indetation/spacing on the submenu items is not working showing on my site: https://www.o21.nu/

    Also the hamburger icon seems higher than before, not aligning with the search icon on iPad.

    Any idea why? Got a fix?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I think you have some other CSS on your site, for example I see a margin of 10px that is causing that

      .mobile_menu_bar {
      position: relative;
      display: block;
      bottom: 10px;
      line-height: 0;
      }

      and your submenu items have the same padding

      .et_mobile_menu li a {
      border-bottom: 1px solid rgba(0,0,0,.03);
      color: #666;
      padding: 10px 5%;
      display: block;
      }

      so you could change that if you want by targeting them with .et_mobile_menu li ul li a

      Reply
      • ECDJ

        Thanks, it was actually a CSS code from you; changing the layout of the submenu, just changed it to only target desktop 😉

  11. Adan

    Hi, dear Thanks for your helpful content.
    But I am facing some problems and don’t know how to solve that. Can you please help me in solving that? As https://codefossils.com/ this is my site. I use your CSS code that helps me in removing the submenu in mobile view but whenever I tried to add your javascript code to my site. I am unable to add that you can see that in the attached image. the circle rotates round and round but nothing happens I am waiting for more than 2 to 3 hours but the behaviour remains the same. still unable to add that.
    I will really appreciate that if you help me in solving my problem.

    eagerly waiting. 🙂

    Reply
    • Hemant Gaba

      This issue is not because of the jQuery Code and there are many reasons for this to happen. Firstly, this can be a plugin conflict so please try to disable all the plugins and then check if the problem still persists or not. If the issue is still there then it could be happening because the server is blocking the code thinking that it is a virus. So to tackle this you need to contact your server host and ask him to disable the mod securities.

      Reply
  12. Daphne Talbot

    Hi Nelson, I’ve used this on several sites. Super easy to implement. Love it.

    On the site I’m moving over to Divi today, the dropdown menu’s parent item is not a link but. In the menu I have the link set as #.

    The site is https://awemoneyandme.com/.
    The dev site is https://tscpreview.net/.

    This works great on the desktop. On mobile, if the parent item is clicked the child menu items stay closed, the page reloads.

    For example:
    Workshops (this has no page but in the menu has a # for the link)
    Money and Me
    Lifestages

    Any suggestions on how to handle the mobile menu so that when Workshops is clicked it opens the menu instead of reloading the page?

    Thanks!

    Reply
    • Hemant Gaba

      The URLs that you have mentioned have limited access so I couldn’t see the content inside. Could you please fix this issue so that I could investigate the problem further?

      Reply
      • Daphne Talbot

        The dev site has been moved to live at https://awemoneyandme.com/. I deactivated Wordfence so you should be able to see the site now. I really appreciate your feedback!

    • Daphne Talbot

      Operator issue…of course your script works. sorry to have bothered you about this.

      Reply
      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  13. ron

    Hi Nelson,

    I have an isue with the mobile toggle not showing up on all pages anymore except one! And that (LearnDash) page is being excluded from caching. ( https://bijbelstand.nl/courses/online-training-bijbelstand/ )

    What is causing that issue? Should I excluded some .js and if yes, wich one?

    Thanks, Ron

    Reply
    • Hemant Gaba

      The toggle is happening perfectly on the website but the problem is that the cross icon is not showing up when we open the menu. So to show the cross icon when the menu is open, please place the code given below in the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel:

      .et-db #et-boc .et-l .opened .mobile_menu_bar:before{
      content: "\4d" !important;
      }

      Please place this code and let us know that how it goes. 🙂

      About the learndash issue, could you please explain that in the little for me to more detailinvestigate further as I am not able to see any error on the URL that you have shared?

      Reply
      • Ron Linders

        Hi Nelson, thanks for the reply. It was a script error hat causes there problem.
        Solved now!

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  14. Diego Matter

    Hi Nelson,

    finally a solution that works. Even ET’s blog post did not work for me. Thank you so much.

    I just had to add this to make the menu wider:
    .et_mobile_menu {
    margin-top: 20px;
    width: 230%;
    margin-left: -65%;
    }

    Reply
  15. Laura

    Hi,

    Thanks so much for this amazing tutorial. Finally, a way to vastly improve Divi’s mobile menu without the bloat of adding another plugin. But I’m running to an issue where when I click (on my laptop with Chrome/Edge dev tools open) or (tap on my iPhone 8 with the latest version of Safari) on of the arrows to unfold the menu, the second and third level menu items don’t appear. Instead, I’m taken to the parent page. Any idea what might be causing this? I deactivated all plugins with no change. When I look in dev tool’s console, I see the error shown in the attached screenshot. I’m thinking this may be the cause, but am not sure how to go about resolving it. So, any insight you could offer is greatly appreciated!

    PS. Since this is a staging site, if you need credentials to take a closer look, please let me know. Thanks again!

    Reply
    • Hemant Gaba

      I am not able to see any screenshot with the comment. Could you please provide the URL of the page for me to investigate further?

      Reply
  16. Luca

    Hello Nelson, your tutorials are as always efficient and detailed and I thank you: But this time I am writing to ask you if they can create conflicts with previous codes, let me explain:
    I used your tips and codes to implement the hamburger function with the x and the word “menu” on my site, they work perfectly. Now I have entered the codes to display the word “New” in the menu and in the submenu always following your suggestions. I noticed that the menu in the tablet and smartphone version appears extended. So I followed your suggestions in this tutorial to compress it, and put the codes where you indicated, but …
    It happens that the menu appears compressed but the arrow to open them does not appear.
    Could you help me?

    Reply
    • Hemant Gaba

      We are glad that our content helps you with your website. Coming onto the issue, for our better clarity could you please share the URL of the website for us to investigate further?

      Reply
  17. Lydia

    Hi Nelson,
    I entered the CSS and it worked but the arrows in the menu didn’t appear. Instead, I see light grey slivers you can barely see. How do I edit the icons (arrows/grey slivers) in the menu if the arrows didn’t show up or if they aren’t arrows after entering the code?
    Great tutorial by the way and many thanks!

    Reply
      • Lydia

        sorry I’m new at web designing. Basically I followed your video and did what you said but the end result was not arrows (you have green arrows in yours) in the mobile menu for the hidden submenu dropdowns. The code worked in hiding the submenus in the mobile dropdown menu but the icon for the drop down was not an arrow or me. I’m wondering why the CSS code didn’t work and what part of the CSS specifically creates the arrows? Hope this makes sense: thanks for the quick reply

      • Hemant Gaba

        The code snippet given above is very neatly labeled. When you will see the labels, you will find two labels which say /*Submenu toggle icon when closed */ and /*Submenu toggle icon when open*/ under that label, the content \33 and \32 are the toggle icons. If the code is not working for you then it might be possible that you are having some console errors so could you please share the URL where you were trying the code so that we can investigate further?

      • Lydia

        This is a response to Hemant Gaba: Thank you so much for explaining what it should read for the toggle icons. It’s strange but when I copied and pasted the code, the content \33 and \32 for the toggle icons was missing. I added those into my code and now have arrows in my dropdown menus! Thank you thank you thank you!

      • Hemant Gaba

        We are really glad that the issue is resolved now. 🙂

  18. Fredrik

    Thank you for all the great tutorials!

    I was wondering if there is a way to click on the name of the menu (instead of clicking on the arrows) to get the menu to drop down. Let say, in your case, you click on “Menu Item” to show all your submenu items.

    Hopefully, you get what I mean 🙂

    /Fredrik

    Reply
    • Hemant Gaba

      I am assuming that you are using a Theme Builder header and you want to show or hide the submenu by clicking on the menu item name. To do that, please paste the jQuery code given below in the Divi > Theme Options > Integrations > Head Panel and place the CSS in Divi > Theme Options > Custom CSS Panel:

      jQuery(document).ready(function(){
      jQuery(“.et_mobile_menu .menu-item-has-children a”).each(function(){
      jQuery(this).click(function(event){
      event.preventDefault();
      jQuery(“.et_mobile_menu”).toggleClass(“pa-block”);

      jQuery(this).siblings(“ul”).toggleClass(“pa-submenu”);
      })
      })
      })


      .et_mobile_menu .menu-item-has-children .sub-menu{
      display: none !important;
      }

      .pa-block{
      display: block !important;
      height: fit-content !important;
      padding-top: 0 !important;
      margin-top: 0 !important;
      padding: 5% !important;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
      }

      .et_mobile_menu .menu-item-has-children .pa-submenu{
      display: block !important;
      }

      .opened .et_mobile_menu{
      height: fit-content !important;
      padding: 5% !important;
      }

      This code will give you the desired results and after that, you can style the menu as per your liking.

      Let us know if that helps. 🙂

      Reply
      • Fredrik

        Hey!

        Thank you for your answer, and sorry for a (very) late response.

        I’ve tried this code, but can’t seem to get it to work. So, I will try to be more specific.

        As you said, my header (a mega menu) is made with the Divi Theme Builder. So, on mobile view, I would like to be able to click on the name to show the sub-items.

        If I have the following structure, I want to be able to click on the names (first Sunglasses, and then Brand) AND/OR the arrows to show the brand names:

        Sunglasses ⌄
        Form ⌄
        Brand ⌄
        Rayban
        Oakley
        BOSS

        Hope this gets clearer! 🙂

        Thanks,
        Fredrik

      • Fredrik

        Never mind my latest answer. I actually solved it myself 🙂

        I replaced this code:

        ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
        .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
        text-align: center;
        opacity: 1;
        }

        with this code:

        ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
        .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
        text-align: right;
        opacity: 1;
        width: 100%;
        padding-right: 5px !important;
        }

        This way I could extend the “click-box”. Maybe not a fancy solution, but it works!

        Best regards,
        Fredrik

  19. Patrick

    Hi Nelson,

    First of all thank you for all the work you put in all these tutorials.
    I’ve just many of them and always with succes.

    Unfortunately i’m having the same problem as Lydia with this tutorial.,
    Even when i add the \33 and \32 nothing is happening. There is no hidden submenus and now arrow or another icon.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for us to investigate further?

      Reply
      • Hemant Gaba

        If I use the above jQuery and CSS code, I can properly see the icons in the mobile menu. Please make sure that you are placing the code in the right place. You need to place the jQuery code in WordPress Dashboard > Divi > Theme Options > Integrations > Head Panel and place the CSS code in WordPress Dashboard > Divi > Theme Options > Custom CSS Panel.

        Please let us know if that helps.

  20. Sarthak Dutta

    Hello Nelson,

    Thank you for this snippet it is very much helpful.

    I have a question ..like in my header I have a button but I want to place it in the mobile menu. I follow your videos I thought you could help me with this.

    Reply
    • Hemant Gaba

      For that please add one more menu item in the menu by going to the WordPress Dashboard > Appearance > Menus and after that design the Menu item to make it look like the button. You can hide that Menu Item for the desktop and tablets by using media queries.

      Reply
  21. Abu Saleh Ridoy

    Your code seems got changed last I used it, and it making a problem for css. Here is the old code
    /*change hamburger icon to x when mobile menu is open*/

    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
    .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: “\4d”;
    }

    /*adjust the new toggle element which is added via jQuery*/

    ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
    ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
    .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
    .et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
    width: 44px;
    height: 100%;
    padding: 0px !important;
    max-height: 44px;
    border: none;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    background-color: transparent;
    }

    /*some code to keep everyting positioned properly*/

    ul.et_mobile_menu>li.menu-item-has-children,
    ul.et_mobile_menu>li.page_item_has_children,
    ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
    .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
    .et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
    .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
    position: relative;
    }

    /*remove default background color from menu items that have children*/

    .et_mobile_menu .menu-item-has-children>a,
    .et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
    background-color: transparent;
    font-weight: 400;
    }

    /*hide the submenu by default*/

    ul.et_mobile_menu .menu-item-has-children .sub-menu,
    #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
    .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
    .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important;
    visibility: hidden !important;
    }

    /*show the submenu when toggled open*/

    ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
    #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
    .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
    .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
    }

    /*adjust the toggle icon position and transparency*/

    ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
    .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    text-align: center;
    opacity: 1;
    }

    /*submenu toggle icon when closed*/

    ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
    .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
    top: 10px;
    position: relative;
    font-family: “ETModules”;
    content: “\33”;
    color: #b699c8;
    background: #f0f3f6;
    border-radius: 50%;
    padding: 3px;
    }

    /*submenu toggle icon when open*/

    ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
    .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
    content: “\32”;
    }

    /*add point on top of the menu submenu dropdown*/

    .et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
    position: absolute;
    right: 5%;
    margin-left: -20px;
    top: -14px;
    width: 0;
    height: 0;
    content: “”;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    }

    /*adjust the position of the hamburger menu*/

    .mobile_menu_bar {
    position: relative;
    display: block;
    bottom: 0px;
    line-height: 0;
    }

    /*force the background color and add a rounded border*/

    .et_pb_menu_0.et_pb_menu .et_mobile_menu,
    .et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
    background-color: #ffffff !important;
    border-radius: 10px;
    }

    Reply
    • Hemant Gaba

      I am afraid that I am not able to understand what the query actually is. Could you please elaborate on the issue that you are facing on the website and share the URL of the website as well?

      Reply
  22. Danilo

    Hi, congratulations for the always very interesting site,
    I can’t fix the open and close cross in the mobile menu, could you tell me where to go for the change, Thanks
    https://www.prolocoollolai.it/

    Reply
    • Hemant Gaba

      Hi Danilo

      I am afraid that I am not able to replicate the issue on my end as the plus and the cross icons are working absolutely fine. Could you please try clearing the cache or checking the website on a different browser or device and see if that helps?

      Please let us know how it goes. 🙂

      Reply
  23. lesterfrancisco

    Hi great example,
    Works for me but, when open in a mobile you need to push the icon for open and collapse.
    How i can make in whole item?
    Thank You!

    Reply
    • Hemant Gaba

      Hi there,
      Could you please share the URL of the page for me to investigate further?

      Reply
      • Anneke Engels

        I have the same issue, my url is https://addendum-pro.de/.
        On the mobile version of the menue, I would like to open the child links when clicking on the name of the parent (for example “Für Bewerber”). Right now, the child links only open when clicking on the arrow on the right side.

        Is there a solution? Thank you! 🙂

      • Hemant Gaba

        Hi Anneke,

        As I could see on the URL that the query you mentioned in the comment is resolved. Please let us know if you need any further assistance. 🙂

  24. Steve

    Hi, I’ve used this snippet to collapse a mobile menu on desktop created using your other tutorial code. The only issue I have on desktop is that the toggle arrows overlap the menu item name. What’s the fix for that?

    Here’s a screengrab of the issue on desktop: https://snipboard.io/QzYrp4.jpg

    Cheers

    Reply
    • Hemant Gaba

      Could you please share the URL of the page so that I could investigate which code is causing this issue?

      Reply
  25. Phil Matt

    Of all the various solutions for this Divi mobile menu problem, the one presented here is the only one that works “out of the box” in all contexts! The commenting out of the CSS is extremely helpful. Divi’s own “official” solution is to use the Theme Builder, which is not really that handy when you’re dealing with a site that is already running off a Divi child theme, using things like Global modules.

    Reply
  26. Saif

    Hi, Thanks for the tutorial it was very helpful, and I was able to solve the issue with the mobile menu not collapsing. But seems the “x” icon is not reflecting in my case, also some “P” alphabets are coming when expanding.
    Any idea what might be the issue and how it can be fixed?
    URL: http://www.stoptoexplore.com

    Reply
      • Saif

        Hi Nelson,
        Thanks for the response. The issues with “X” icon not reflecting got resolved but the “P” is still visible. I disabled Autoptimize, cleared the caches. But still see the same 🙁
        Any other suggestion ?

  27. Endrew

    Hi Nelson, great tutorial as always!

    Works great for me, but how can i put the first menu item opened?

    Reply
  28. Leha Carpenter

    Thanks for trying, but the jquery seems to be the same approach as a solution I tried on another client site probably ten years ago, and my problem with it is that when the user clicks on any parent menu item, they expect it to open that item, but instead, it causes the whole menu to fold up. I don’t want to frustrate site visitors, and this behavior is going to do that.

    I do appreciate the effort, as well as many of your other code snippets!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Not sure what you mean. If a parent menu item is an actual link, then it needs to be a clickable link…not open the submenu. Opening the submenu of a parent item needs to be done via the icon. Otherwise you lose access to that main parent page link.

      Reply
  29. diana

    Hi Nelson, I posted a comment for help yesterday, but it is not even showing for me as pending anymore. Anyway, my question was if there is a way to make a menu collaspible to look different for pages that I have a new header for using divi builder? I have the collaspe code already for the rest of the site but I want the sports pages to look different. You can see the testing version on my test site: https://diananashif.com/mca-sports-mainpage/

    The main MCA site that I will be moving these pages and new header to is: https://mannahouseacademy.com/

    Appreciate your guidiance on this…….
    All the best,
    Diana

    Reply
    • Hemant Gaba

      Hi Diana,

      The feature of showing the pending comments is removed now but we get all of your comments and we are here to help. 🙂

      Coming to the issue, I am not sure that I totally get what you are trying to say but this is what I understood:
      You have the code for the collapsable menu that is being applied to all the pages but you don’t want to apply that code to the sports page so what you can do is instead of placing the jQuery or CSS code for the header in the Integrations or Custom CSS Panel, you can go to the template where you want that code to take effect, add a code module and place the jQuery and CSS code wrapped in there respective tags in that module. This way the code will only be applicable to that very page and not the rest and this you can do with other templates as well so the page where you will not add the code will not be affected and can be designed differently.

      Let us know if that helps. 🙂

      Reply
  30. Dan Cahill

    Hi, The icon is on top of the menu element… Any help how I fix this would be much appreciated.

    Reply
    • Hemant Gaba

      Hi Dan,

      On my end, I am not able to replicate the issue that you stated in your comment on the given URL. Please provide the URL of the website where you are facing this issue.

      Reply
    • Hemant Gaba

      Hey Evan, As far as overlapping is concerned I am afraid that I am not able to replicate the issue on my end and everything looks just fine. Talking about the icon styling and shape, it is because of the CSS Snippet that is present in the guide and you can change the snippet as per your liking.

      Reply
      • Jon Crowder

        Hemant, Thanks! This code is great, but I have the same vague football shape icon too. I don’t understand where to change that in the code??? A “+” symbol would work too. Or, the arrow that’s mentioned in the blog would be fine. Help please. https://peakrhythms.com
        Thank you!

      • Jon Crowder

        Hemant,
        Never mind. I fixed it.
        Thanks!
        Jon

      • Hemant Gaba

        I am glad to hear that the issue is resolved now. 🙂

        Please let me know if you need any further assistance.

  31. Jesse

    This tutorial worked great for refining my mobile menu display. Thanks!

    Do you have any tutorials for collapsing the Divi menu submenus on a desktop?

    Reply
    • Hemant Gaba

      Hi Jesse,

      I am a little confused here as the submenu are collapsable by default on desktop view so could you please elaborate on the issue a little more?

      Reply
      • Jesse

        Hi Hemant,

        The tutorial works great for mobile screens, but when the menu is displayed on screens with larger breakpoints, it doesn’t collapse the submenu’s second and third level menu items. I was wondering if there was another tutorial on how to collapse the second and/or third level submenu items for screens with larger breakpoints. Ideally, the desktop menu’s third level submenu items would also collapse–creating a flyout or stacked list when hovered over. Right now all of the submenu items are displayed at once on the desktop.

        Thank you for your help.

      • Hemant Gaba

        Could you please share the URL of the website for me to investigate further?

  32. Christan

    Hi Nelson,

    thank you for this great tutorial!

    I just have a question to the 2nd level (when there is a 3rd level in the menu). In this case the toggle on the 2nd hierarchy is not right aligned. It is positioned directly after the menu item name.

    How can I fix it that the toggle is right aligned as in the top level/1st hierarchy of the menu?

    To clarify what I mean, please take a look in my loom video: https://www.loom.com/share/513b3b775e754f3c97838ffbc2657a21

    Best regards,
    Christian

    Reply
    • Hemant Gaba

      Hi Christan,

      I understood your problem and it would be great if you provide the URL of the website for me to investigate further.

      Reply
  33. Hilmi

    Hi Nelson,

    I admire your work, I request your help. Sory bad grammar 🙂

    I clicked it and the first menu opened with submenu . Then I clicked on a second menu. Opss, the first remained open!
    I have a very large menu content so, how to automatically close the open menu item (with submenu) when clicking on another menu item? what should i add in the code below?

    (function($) {
    function setup_collapsible_submenus() {
    var FirstLevel = $(‘.et_mobile_menu .first-level > a’);
    FirstLevel.off(‘click’).click(function() {
    $(this).attr(‘href’, ‘#’);
    $(this).parent().children().children().slideToggle(‘reveal-items’);
    $(this).toggleClass(‘icon-switch’);
    });
    }
    $(window).load(function() {
    setTimeout(function() {
    setup_collapsible_submenus();
    }, 700);
    });
    })(jQuery);

    Reply
      • Vanda

        Hi, I’m looking for the solution mentioned in this comment. However the code you provided here https://www.codepile.net/pile/3jd1zXxd does not work for me.

        Any advise? Pretty please, as I’m banging my head here for many many hours 🙁

      • Vanda

        Hi,

        I wrote this before, but my comments weren’t shown.
        I have the same problem and the code you suggest doesn’t work on my website. Could you please advise?

  34. Laszlo Bartucz

    Hi Nelson,
    Another fantastic tutorial – thank you very much.
    Could you please help me display the word ‘Menu’ next to the menu icon properly?
    The code I’m using at the moment is:
    .et_mobile_nav_menu:before {
    content:’MENU’;
    font-family:Neuton;
    font-size: 1.3em;
    color: #24839e;
    margin-right: 5px;
    }
    .

    Reply
    • Hemant Gaba

      Hi Laszlo,

      The URL the you provided already has the Menu text besides the hamburger icon so I am assuming that the query is resolved now.

      Let us know if you need any further assistance.

      Reply
  35. Thomas

    Hi, I am managing a website and tried implementing your code.

    When I use the inspector on the desktop and look at the webpage in mobile view, everything works perfectly.

    When I actually open it up on my phone, none of the arrows show up making it impossible to access any submenus. Any idea what could be going on?

    Reply
    • Hemant Gaba

      Hey Thomas,

      I tried opening the website on my phone and I am not able to replicate the issue that you are facing but if you want to move the arrows to the left a little then you can use the code given below:

      #access > .menu ul li > a:not(:only-child) span:after{
      right: 20px !important
      }

      Increase the right property value to move the icons to the left.

      Let me know how it goes. 🙂

      Reply
      • Irene

        Got same issue. When resizing the browser on desktop all showing fine as it should but on an actual mobile device the toggle icons are not available? Thanks in advance for any tips.
        https://jmh.irenesoler.com/

      • Hemant Gaba

        Hey Irene,

        It is working fine on my end. Could you please remove the cache from your device and check again?

  36. Kristina

    Hi Nelson,
    Love your tutorials!!
    I have a question; Is there any way to make this work on desktop?

    I have a page where I would like to keep the menu showing as a regular menu (not in a hamburger menu), but I would like to have the collapsing effect.

    I have three menu levels ranked this way: Products(main menu) -> product categories(sub item) -> and lastly the product itself (sub sub item)

    Is that possible? 🙂

    Reply
    • Hemant Gaba

      Hi Kristina,

      Could you please share the URL of the website for me to investigate further?

      Reply
  37. Arindam

    Great tutorial. But in some cases the collapsable icon not looking in right way. So my suggestion is that remove the font-family: etmodules then put ‘+’ and ‘-‘ sign accordingly.

    Reply
  38. John Stavola

    The content for the toggle arrows is set to nothing in your code … Thus, showing no arrows.

    content: ”;

    When I set mine to…

    content: ‘\32’; (for when open)
    content: ‘\33’; (for when closed)

    then it it worked.

    Also for the top hamburger to show an x I had to use this:

    content: ‘\4d’;

    not

    content: ‘d’;

    Reply
      • Sarah Austin

        I noticed the same as John Nelson, in your CSS above you have content: ‘d’; for changing the hamburger icon to X, and lower down content: ‘ ‘; where an ETModule code should be (e.g. content: ‘\4c ‘;), S

      • John Stavola

        Nelson, See this screenshot of your code above… there is nothing in between the apostrophes for the content of the arrow toggles.

        https://snipboard.io/wt6SCd.jpg

  39. hadey

    Hi Nelson,

    Is this still working? It does not seem to work for me. I am using Divi ver 4.12

    Thanks

    Reply
  40. Sarah Austin

    Just a small issue Nelson, but I am finding it increasingly annoying because I can’t solve it myself – would you mind suggesting where can I add a Z-index property that will ensure the mobile menu dropdown overlays the WooCommerce image zoom icon on a product page, for example: https://hawaiian-shirt-shop.co.uk/product/san-souci-mint/ – many thanks in anticipation

    Reply
    • Hemant Gaba

      Hi Sarah,

      Go to the Divi > Theme Options > Custom CSS Panel and place the code given below:

      a.woocommerce-product-gallery__trigger {
      z-index: 1 !important;
      }

      Let me know how it goes. 🙂

      Reply
  41. Percy

    Hello, I copied and pasted the code but it doesn’t appear the point on top of the menu submenu in mobile and desktop. The submenu appear without round corner in mobile and desktop.
    My website is http://www.ayudaadomicilio.pe

    Reply
      • Percy

        Hi Nelson,

        This code is part of this tutorial. It is the first time that you use this code for mobile but it doesn’t work.

        /*add point on top of the menu submenu dropdown*/

        .et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
        position: absolute;
        right: 5%;
        margin-left: -20px;
        top: -14px;
        width: 0;
        height: 0;
        content: ”;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ffffff;
        }

      • Hemant Gaba

        Hey Percy,

        Could you please share the URL of the website for me to investigate it further?

  42. Randall Brunette

    Hello! Really appreciate your excellent tutorials – so helpful!

    For this one, I’m wondering the best way to modify the css to allow the nav link text ALSO activate the dropdown just as the icon does? I hope that makes sense. It seems intuitive to me that many/most? people would click on the text to cause the dropdown to activate, rather than the icon off to the right side.

    Thank you in advance if you’re willing to help!

    Reply
    • Hemant Gaba

      Hey Randall,

      We are working on this extension and will get back on this shortly.

      Reply
  43. Kelley Tracy

    Hoping you can help. I have read through all of the comments but still have a problem in this site: https://njfireems.com/.

    I did not use the Theme Builder Header, just the Theme Customizer. The parent menu item do not have links. On mobile, I want them to be clickable to expand just like the caret symbol.

    Can you help?

    Reply
      • Kelley Tracy

        Yes, updated all code but it does not seem to work. Not sure what I’m doing wrong. Can you help?

      • Hemant Gaba

        Hey Kelley,

        I check the URL and I am unable to see the submenu items so could you please elaborate the issue you are facing or am I missing out on something?

      • Kelley Tracy

        Just to add… I tried on another site too with same result. I simply want the parent menu item to act the same way as the caret; i.e. to expand the menu when clicked, just like it expands the menu on hover for desktop.

      • Hemant Gaba

        Hey Vladimir,

        I have checked the website and it works perfectly fine on my end.

      • Kelley Tracy

        Darn… replied twice and my first one disappeared! Just wanted to say that I am still having trouble perfecting this.

        I tried on another site too with same result. I simply want the parent menu item to act the same way as the caret; i.e. to expand the menu when clicked, just like it expands the menu on hover for desktop.

        Please help! This will be an awesome solution if we can get it to work.

  44. Colleen

    Thank you for this tutorial. I added the code to my site successfully with one glitch. The first time you click the menu, the arrows don’t appear. You have to close and reopen the menu fir them to appear and for you to have the ability to expand the submenus.

    Would you be able to help me identify why?

    Site: anaturalcuriosity.org

    Thank you!

    Reply
    • Hemant Gaba

      Hey Colleen,

      The jQuery code is getting delayed somehow. I guess it’s happening because of some setting in the Performance Tab that you are using. Please try disabling the jQuery defer or delay if you are using and see if that helps. If some performance plugin you are using so try deactivating that as well and see where this delay is arising.

      Let me know how it goes.

      Reply
  45. kristie

    Hi I’m having an issue where the toggle inherits a menu icon. The submenu also inherited the icon but i was able to block it ” #menu-item-5901:before {display: none;} “. The icon appears to the left of the toggle. How can i stop this? https://emeralderin.com/sample-page/. Thanks for your tutorial!

    Reply
    • Hemant Gaba

      Hey Kristie,

      On the URL provided, I cannot spot the icons in the submenu. Could you please check it in incognito mode and see if that helps?

      Let me know how it goes.

      Reply
  46. mv nezuko

    Hi I tried, your optional code.

    it doesnt work when the parent element is click it doesnt show the sub menu.

    do you have a full tutorial ?

    or did I miss something .

    also do I need to just add the optional : Jquery and CSS ?

    Or replace your provided JQUERY and CSS completely ?

    thank you so much

    Reply
    • Hemant Gaba

      Hey mv,

      Could you please share the URL of the website for me to investigate further?

      Reply
  47. Evan

    Hi, I have a similar question to the comment above.

    Your additional option of “Use Parent Menu Item As Toggle For Submenu” is exactly what I am looking for. However, you do not clarify how I am supposed to apply it. Should I keep all the previous Jquery and CSS from the first option and add the section option code to it or delete all of the first option Jquery and CSS and just use the code you have for the second option (hope that makes sense).

    Also, for the second option Jquery, I don’t see . I assume this needs to be added in? Not sure if it was intentional or not for leaving it out.

    Reply
  48. Evan

    Hi, I have a similar question to the one above.

    Your optional code to use the parent item for toggle is exactly what I have been looking for but I can’t get it to work. The submenu is hidden but when I click the parent menu, the entire menu collapses.

    Am I supposed to use both Jquery and CSS from the first option and the new option or just the Jquery and CSS from the new option?

    Reply
    • Hemant Gaba

      Hey Evan,

      You need to use the code given below which you are referring to as a new option. I have placed the jQuery code in the console of your website to check whether it’s working fine or not and it’s working completely fine on my end. Please copy the jQuery code from this comment and see if that helps:


      jQuery(document).ready(function(){
      jQuery(".et_mobile_menu .menu-item-has-children a").each(function(){
      jQuery(this).click(function(event){
      event.preventDefault();
      jQuery(".et_mobile_menu").toggleClass("pa-block");

      jQuery(this).siblings("ul").toggleClass("pa-submenu");
      })
      })
      })

      Let me know how it goes.

      Reply
      • Cameron

        Hi Hemant,

        I was looking to use the optional code and I can’t get it to work on my site. The parent item just seems to close the whole menu.

        Thanks in advance 🙂

      • Hemant Gaba

        Hey Cameron,

        I have investigated your URL and I cannot see the submenu items in the menu. Could you please let me know if I am missing out on something here?

  49. Ahmed

    Greetings
    Thanks for the code, it worked perfectly but it got an issue when using icons in menu, it duplicates the icon of the menu item that got sub menu, the duplicated icon will be attached near to the arrow icon.
    The code needs some modification so it can work perfectly with menu’s that got icons.

    Reply
    • Hemant Gaba

      Hey Ahmed,

      I cross-checked the code on my end and I am not able to replicate the issue that you are mentioning. It would be great if you please share the URL of the website for me to investigate further.

      Reply
      • Ahmed

        Hey Hemant,

        Please check following demo page https://bit.ly/3BcVAgt

        You’ll find that there is a duplicated icon in the menu item that got sub menu. (Mobile Menu)

        Thanks

      • Hemant Gaba

        Hey Ahmed, please use this code and let me know how it goes.

        @media all and (max-width: 980px){
        .ld-menu-account a:nth-of-type(2):before{
        display: none;
        }
        .ld-menu-account a:nth-of-type(1):before{
        font-family: 'ETMODULES';
        content: '\e08a';
        text-align: center;
        margin-right: 10px;
        margin-left: -10px;
        color: #2ded30;
        font-size: 1.3em;
        transition: all .3s ease;
        }
        }

  50. Kris

    Hi,

    Is there a way to make only one submenu open at a time?

    Thanks!

    Reply
      • shamim asfak

        i think the idea is if anyone open any submenu then another opened submenu will automatically closed.

  51. Jorge

    Optional jQuery and CSS is not working and I need to do that !
    Can somebody help me?

    Reply
    • Thomas

      This isn’t working for my either. Did you find any solution?

      Reply
      • Hemant Gaba

        Hey Thomas,

        We are working on the issue and will get it fixed.

  52. Edoardo

    Hi there Nelsen! Thanks you so much for this awesome tutorial http://www.unipiazza.it

    Could you give us a check? <3

    Thanks a lot from Italy!

    Reply
  53. shamim asfak

    can i make this menu fullwidth ?

    Reply
  54. Malia C Tippets

    This code saved my bacon! Thank you.

    One question – when I do a search on my site on mobile, and land on the search results page – THEN go to the menu again, all of a sudden all of the submenu’s are expanded and because I am using a sticky header, I am unable to scroll to the bottom of my menu.

    The sticky header isn’t an issue when only one of the menu items is expanded at a time, but this reaction is opening all of the sub menus automatically. Any help is appreciated!

    Reply
    • Hemant Gaba

      Hey Malia,

      I have tried to replicate the issue on my end but everything seems to work fine for me. Could you please try using a different device or browser and see if that helps?

      Reply
  55. Jon Lee

    Hello, I am trying to use the “Use Parent Menu Item As Toggle For Submenu”, in combination with your full screen mobile menu. Not sure if there is some sort of code conflict here? I’ve included the jQuery and CSS but it doesn’t seem to work. Thank you for your time.

    Reply
    • Hemant Gaba

      Hey Jon,

      I have checked the website and everything is working fine on my end. Could you please check it on a different browser or device and see if that helps?

      Reply
      • Jon Lee

        I tried viewing it in Chrome, Firefox, and Edge, and still no luck. When I click a parent menu item (ex: Residential), it just closes the menu instead of expanding the dropdown. Actually, I removed the jQuery temporarily as it seemed to make my hamburger menu unclickable for some reason. Could you test things on your end? Thank you!

  56. Dan Gracey

    Hi Nelson. This works great on the main Divi menu, but for some reason, it doesn’t affect the Menu Modules. Specifically, the mobile-toggle is not appending to the li.They use the exact same classes you are targeting in your tutorial. Any thoughts?

    Reply
    • Hemant Gaba

      Hey Dan,

      Could you please provide the URL for me to investigate on this?

      Reply
  57. Jozef

    Hei Nelson

    Thank you for the tutorial. Now the menu feels and works better : )

    Is there a way to animate the expansion of the sub-menu items after click?

    So it works well with the animation of the main menu when hamburger is clicked, expanding gradually?

    Reply
    • Hemant Gaba

      Hey Jozef,

      Could you please share the URL for me to investigate further on this?

      Reply
  58. Bob

    Sir could you please send html file attached to this code?
    I’m injecting it manually and i want to read the code by lines

    Reply
  59. Tobias Nørbygaard

    Hey, is it possible to make it only target second child sub menu?
    so that the first set of parent menus are still folded out but the second level is collapsed?

    e.g this website silent.offbeatmedia.dk i would like the children of “koncepter” to be visible while they are kollapsed themselves 🙂

    Reply
    • Hemant Gaba

      Hey Tobias,

      We have never tried this approach but will do it and get back to you with the ideal method.

      Reply
  60. Nels

    Hello Nelson!

    This tutorial worked perfectly before, I’m using Divi 4.0.3. It’s all thanks to you!

    But then, when I updated my Divi version to 4.14.7, everything just didn’t work.

    The submenu is not displayed, the toggle button to open the submenu is also not present.

    In other words, the submenu became completely non-existent on my site.

    Reply
    • Hemant Gaba

      Hey Nels,

      I have checked the URL provided and it works completely fine on my end.

      Reply
  61. Brian

    Hi Nelson, thanks again for a great tutorial. I got the toggles version working, but I am trying to use the parent toggle version. For some reason I can’t get it to work. I am not using top level pages but custom links with # as the URL, so I don’t know if that makes a difference. Here is the link – http://georgiospizza.tbgl.net. Thanks for any assistance you can provide!

    Reply
    • Hemant Gaba

      Hey Brian,

      The URL that you provided is leading us to a 404 error. Could you please provide a valid URL in order for us to investigate it further?

      Reply
      • Brian

        Hi Hemant, thanks for checking in. I eventually figured it out and launched the site so that link no longer works.

  62. Brian

    Hi again, I think my last comment didn’t actually go through I apologize. Thanks for this great tutorial. I have this working except for the parent links. They just close the menu instead of opening the submenus. The toggles are working, however. Thanks!!

    Reply
    • Hemant Gaba

      Hey Brian,

      I am not able to access the URL provided, could you please check it and place the URL again in order for me to investigate it further?

      Reply
  63. Matthew Upton

    Hello Nelson!

    I have a client that wants this same effect on a desktop menu – meaning that a 2nd level submenu slides down inside it’s containing menu, instead of the standard flyout (to one side or other). I’ve tried adapting code to make it happen, but just can’t get it to work. Any ideas? New tutorial maybe? Thanks for all you do!

    Reply
    • Hemant Gaba

      Hey Matthew,

      We will definitely work on this and will get back to you with the ideal solution.

      Reply
  64. Janik

    Hello,

    the additional function for “click for parent menu” is not working. I just added the css and script (head integration) to the other codes with no effect.

    is the code up to date?

    Reply
  65. Janik

    Hello,

    the optional script and code is not working (anymore?).

    any idea whats going wrong? seems like a lot of guys has this problem.

    best regards

    Reply
    • Hemant Gaba

      Hey Janik,

      We have checked the code and you are right, we will update the code inside the guide as soon as possible.

      Reply
  66. Tobias Noerbygaard

    Is it possible to only collapse 2nd child menu?

    Like if i have a menu where a top level says companies, then under that i have e.g b2b as one point and b2b as another point.

    i would like to see both those when opening the menu, but i would like to collapse those so the 5 points under both 2b2 and b2c are hidden.

    Reply
    • Hemant Gaba

      Hey Tobias,

      We haven’t tried it yet but we will try and let you know as soon as possible.

      Reply
  67. Aleksandar

    Hello. Code is great for 1 language. I have a multilanguage with 4 languages ( WPML ). On main language is ok.
    On other languages not working. How to solve this

    Reply
    • Hemant Gaba

      Hey Aleksandar,

      I am assuming that your question is different from the post you have commented on as it doesn’t matter in how many languages the website is being translated into, the codes are written in jQuery and CSS which stays the same throughout.

      Reply
  68. kelvin

    Hello, good day, I wanted to comment, I used the code and it works perfectly, except for a small problem, the menu appears only on the pages but it does not appear on the posts, I am using the divi constructor to apply a sidebar in all the posts, I don’t know if that’s the problem, but before adding the code that didn’t happen, any solution, thank you very much

    Reply
  69. Steve-007

    very helpful! thanks so much for making it straightforward and simple!

    Reply
  70. KC

    Hey just wanted to let you know how much I appreciate you posting stuff like this. Worked like a charm! THANK YOU THANK YOU THANK YOU!!!

    Reply
    • Hemant Gaba

      Hey KC,

      We are glad that you are liking the stuff we post. 🙂

      Reply
  71. Kim

    Thank you for this post. I have a large menu. My issue is I can’t scroll down the mobile menu. The scrolling action scrolls the page beneath the menu, but the menu is static. Any help is appreciated. Thanks.

    Reply
    • Hemant Gaba

      Hey Kim,

      Could you please provide me the valid URL of the website for me to check the menu and fix this issue for you?

      Reply
  72. Lee Burrett

    Hi

    Great tutorial 🙂 – it works a treat on my site except for the fact that the parent menu text becomes invisible when I expand the submenu toggle. The text only re-appears when another menu option is selected. Just wanted to check that there was nothing in the code that I have missed that would cause this effect. I’m using a Global Header but can’t see anything in the Menu module options that would cause this so just wanted to check nothing in this code that would be the issue.

    Thanks

    Lee

    Reply
    • Hemant Gaba

      Hi Lee,

      I am not able to spot the issue on my end. Please let us know if it’s fixed already.

      Reply
  73. Igor

    Parent Menu Item doesn’t work at all.
    I see many complaints about that, but there is no real solution.

    I noticed some bugs in the javascript code, but nothing didn’t help.

    Can author of this code try this again and post again solution and fix?
    Thank you.

    Reply
    • Hemant Gaba

      Hey Igor,

      Could you please share the URL of your website? I am checking the issue myself and your website URL will help me try the updated code in different scenarios for ideal results.

      Reply
  74. Fazasystem

    Hey. Thanks for your help.
    It works for me but i just have a problem about it.
    when i place codes on their places it will only works once. I mean i place code. use dropdown and click on one of my categories and after that dropdown button is not there. not even in the home page of my website.
    Will you please help me out on this one?
    Very appreciated for all your efforts. 🙂

    Reply
    • Hemant Gaba

      Hey there,

      Could you please share the URL of the website for me to investigate it further?

      Reply
  75. René

    Hi Nelson

    Placed my previous comment at the wrong post earlier. Hence this additional input to making the Parent MEnu text being clickable

    Add this to the CSS style sheet

    @media (max-width: 980px){
    .tippy-popper {display: none !important;}

    }

    Reply
  76. Wilson

    Thanks for sharing, will try this on my next project.

    Reply
  77. Michel van Osenbruggen

    Hi, thanks a lot for sharing. We placed your code on our website (still development) And it doesn’t work on the HomePage, but it does work on all subpages.. Any idea? This is the (test) URL https://new.artiled.nl

    Reply
    • Hemant Gaba

      Hey Michel,

      I have checked the URL provided and according to my analysis, there is some custom code or the plugin that is being applied on the homepage and conflicts with the code. Could you please try deactivating the plugins or removing the code present on the page other than the code in the guide and see if that helps?

      Let me know how it goes.

      Reply
  78. roberto val

    Hola Nelson, lo primero felicitarte por tus enseñanzas y darte las gracias por todo. quisiera comentarte varias cosas me puedes indicar como modificar el hover (que css necesito) de las distintas categorías del menú desplegable.
    por si te sirve he visto comentarios que el menú desplegable al ser muy largo por tener muchas categorías no hacia scroll, lo resolví poniendo en el modulo del menú tanto en la sección como en la fila y el mismo modulo/// scroll to top / sticky limit / body area

    Reply
    • Hemant Gaba

      Hey Roberto,

      It would be great if you ask the query in English as it would be easy for us to understand.

      Reply
  79. Kim

    Thank you, thank you, thank you! You are the best!

    Reply
  80. Claudio

    Hi Nelson,
    thank you very much for this solutions and for all others you share.
    I have a problem though with the arrow icons which do not want to show up on my website. I checked on all browsers and on a few devices but I cannot solve it. I read all the comments on this thread and tried all the solutions/suggestions … and still nothing. Can you please give it a look?

    The website is https://www.dyslexicadvantage.org/

    Thanks!

    Reply
      • Claudio

        Thank you for your quick response Nelson.
        I turned them off but no change.
        Any other hint?

        Thanks!

      • Claudio

        Thanks anyway!

  81. Sarah Park

    Hello, thank you for this code! Worked perfectly– is it possible for the submenu to open and close with a sliding effect? Thank you so much..

    Reply
    • Hemant Gaba

      Hey Sarah,

      Could you please elaborate on the sliding effect, like from where you want to start and end the sliding?

      Reply
  82. Gaulin

    Hi Nelson,

    Very nice code!

    I do not want to use Parent Menu Item As Toggle For Submenu (only the arrow)

    I have integrated the first Script but when you click in Parent item it’s opening the toogle and it isn’t bring you to the url parent Page.

    Thanks in advance for your help 😉

    Best regards,

    Emmanuel

    Reply
  83. Nay Stevens

    Thanks so much for this tutorial Nelson. I have a custom link (without a link) for the parent menu (similar layout to the menu on your site). Is it possible for the sub menu to open when you tap the parent menu item as well as clicking on the icon? Right now when you click on the parent menu, the entire menu closes. It doesn’t feel like a good user experience for this to happen. I never even noticed it before but one of my clients pointed this out. This is the site I’m working on – http://box5402.temp.domains/~rojecttg/

    Reply
    • Hemant Gaba

      Hey Nay,

      The URL you provided is not working, could you please provide a valid URL for us to investigate further?

      Reply
      • Stephen

        I have this same exact question. I’d love for the parent menu item (not just the button) to open up the submenus. Could you help?

        Thanks for the help.

      • Hemant Gaba

        Hi Stephan!

        We have updated the CSS code to make the sub menu on click of parent menu items. Please follow the guide under the header Option: Use Parent Menu Item As Toggle For Submenu.

  84. Marc

    Hi,
    First of all, thank you very much for this great tutorial!!! I like it!!!
    My only problem like many is that the Option: Use Parent Menu Item As Toggle For Submenu doesn’t work. I try the code but it didn’t work.

    I can see that others have the same problem. Someone fixed it here:
    https://divi.help/threads/make-parent-menu-item-behave-same-as-toggle-to-open-submenu-on-mobile-menu.9633/

    He says:
    “I figured out the solution by manually adding/removing the open/closed class. I replaced the preventdefault with this line of code:
    $(‘div.mobile_nav’).removeClass(‘closed’).addClass(‘opened’);”

    But i’m not sure what he meant??
    Your help will be much appreciated.
    Best Regards

    Reply
    • Nathan

      Hi Marc,

      I have a really simple solution:

      ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
      width:100%;
      text-align:right;
      }

      Reply
  85. Ben

    I’m having trouble with this and mega menus unfortunately. Normal dropdowns work but mega menus fail to open and there is an error in the console that reads Cannot read properties of undefined (reading ‘slice’)

    Reply
    • Hemant Gaba

      Hey Ben,

      Could you please share the URL of the website for me to investigate it further?

      Reply
  86. John

    Thanks, but I had a bug! After I put the code the three line icon (humberger menu icon?) is on aligned to the TOP and the search icon is aligned in the middle. It’s not nice to see it. Do you know how to fix it?

    Reply
  87. Graceson

    Hei Nelson

    Thanks for the tutorial,I just wanted to know how to Increase the size of the Divi Menu Dropdown Width.
    Do you have a css u could share.

    Best Regards

    Reply
    • Hemant Gaba

      Hey Graceson,

      This can be achieved using the CSS and there is no default way in Divi to do that. Please share the URL of the website for me to write the code for you.

      Reply
  88. Savannah Brentnall

    Thanks so much for this tutorial! The menu displays perfectly on mobile, but clicking on the arrows does nothing and I cannot open the submenus. I copied and pasted all the code above, so I’m not sure what I’ve done wrong. Help!

    Reply
  89. Mario Savard

    Hello,

    Your code works great. Although I only see the icons when i’m logged in and they don’t appear when I’m not logged in.

    It seems like the class=”mobile-toggle” isn’t loading. Any idea how to fix?

    Reply
    • Mario Savard

      Nevermind, I got it working.

      Added the jQuery code in the script.js file in my child theme instead of the integrations tab.

      Reply
      • Hemant Gaba

        Hey Mario,

        Glad to hear that the issue is resolved.

  90. Duarte Gonçalves

    Hello Nelson,
    I love what you do man! Amazing tutorials that make things look better!
    Thank you so much, thank you!
    Have a great day!

    Reply
  91. Cristina

    Hi Nelson, thanks for this tutorial that I like very much. My problem is that it doesn’t work if I have the Siteground optimizer plugin active! When this is disabled it works. Can you help me please? Thanks

    Reply
    • Hemant Gaba

      Hi Cristina!

      Please try disabling the Minify and combine CSS option in SG optimizer plugin and check again.

      Reply
  92. Wayne

    Hi there,
    Amazing site with a lot of very helpful code. Regarding this sub menu code, I can’t seem to find the CSS that would allow me to increase the size of the toggle.
    Thanks for any help you can provide.
    Cheers,
    Wayne

    Reply
    • Hemant Gaba

      Hi Wayne!

      It seems you’re referring to the toggle icon font size. Please try the following code:

      ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
      font-size: 30px;
      }

      Let me know how it goes!

      Reply
  93. Caterina Cirri

    Hi, great tutorial, it works, but I have an issue… I used your solution, but each time I try to open the submenu, before than opening the sub-items, it closes… and after, I have to open it again! I would like that it keeps always visible, during opening / closing the sub items…
    thank you for your kind help!

    Reply
    • Hemant Gaba

      Hi Caterina!

      I’m not sure exactly what is causing the issue. Could you please share the URL of the website for me to investigate it further?

      Reply
  94. Aunia Kahn

    Hey there! When adding the code it makes all of my hero sections and headers have a gap at the top. I remove the CSS, nothing changed, but when I remove the jQuery and it goes back to normal. I am baffled.

    Reply
    • Hemant Gaba

      Hey Aunia!

      I’m not sure exactly what is causing the issue. Could you please share the URL of the website for me to investigate it further?

      Reply
  95. Kelly

    Hi Nelson, thanks for the code. I got one of my problems fixed: the drop down now has the main headings in the mobile view. But I can’t see the toggle to see the sub-menus under those main headings. How do I fix that? Thanks!

    Reply
    • Hemant Gaba

      Hey Kelly!

      Could you please share the URL of the website for me to investigate it further?

      Reply
  96. Douglas Mbugua

    Hi Nelson, thank you for the code, it indeed collapses the menu. However I cannot see the icon to toggle to see the submenus on the website. Coudld you help me troubleshoot that please. The site is https://missionhomeremodeling.com/ Thank you so much

    Reply
    • Hemant Gaba

      Hello Douglas!

      I visited the website, and the mentioned code is not there. Could you please go through this article step by step?

      The code above works well when I added them using the inspect option. Please look at the image below:

      https://prnt.sc/ZG-Qv8zrxiKk
      https://prnt.sc/AAjJtPtmV69R

      Reply
  97. James

    This worked beautifully and very grateful for the code.

    Thank you kind internet person.

    Reply
  98. Oriana O

    Hello,

    The arrow that allows you to see the submenu only appears on my home page for mobile. When you go to any other page on the site, then click the menu, my parent menu item “Commercial Energy Programs” no longer has a drop down. Again this is only on mobile.

    My site: https://consumerenergysolutions.com/

    Reply
  99. Sam

    Hello,

    Firstly, thank you for this. It’s very help and on the whole works very well.

    I do have one slight issue though and wondered if you could help.

    On our site, https://www.raisingfutureskenya.org.uk/ the menu now works well on the mobile home page and displays the toggles. But if I visit one of the toggled pages the mobile menu changes and no longer shows me that the toggles are available. Do you know why this might be happening and how I can change it so the menu works on all of the mobile pages as well as it does on the home page.

    Thank you,

    Sam

    Reply
    • Hemant Gaba

      Hi Sam!

      I’m able to see a jQuery error in the console for the other pages which seems to be conflicting with the Menu script. Can you please check again by removing all the other scripts except the collapsable menu one from Integration tab and disable all the plugins manually?

      Reply
  100. Eugene

    Hi Nelson,

    Great tutorial, as always. Thanks.
    But:
    For the first time, I have not been able to get the snippet to work.
    If you put the JS code in Divi>Theme Options>Integrations, it works fine.
    But if you put it without in the scripts.js file, it doesn’t work.
    Maybe I’m doing something wrong with the location of this file.
    Where should it be?
    Should it be placed in the JS folder in the Divi child theme?
    Or just put it along with style.css in the root of the child theme?

    Reply
    • Hemant Gaba

      Hi Eugene!

      The issue seems to be loading of the JS file on the site which could happening due to Divi performance options or Cache plugin. Try disabling them and check again. If the issue persists, contact the Elegant themes support.

      Reply
  101. Daniel Witts

    I loved the tutorial! I have one small problem with the nav bar on my mobile. For some reason, my main menu items that have submenu listings turn completely white when clicked on mobile. Only my Services and Consumer products sections turn white like this. If I can get any help I would greatly appreciate it! Thanks

    .et_mobile_menu li a:hover {
    opacity: 1;
    background: #88c645;
    color:#ffffff;
    }

    .et_mobile_menu ul.sub-menu a:hover {
    opacity: 1;
    background: #88c645;
    color:#ffffff;
    }

    Reply
    • Hemant Gaba

      Hi Daniel!

      Please try the following code and see if it helps:

      .et_mobile_menu li a:hover {
      opacity: 1;
      background-color: #88c645 !important;
      color:#ffffff;
      }

      .et_mobile_menu ul.sub-menu a:hover {
      opacity: 1;
      background-color: #88c645;
      color:#ffffff;
      }

      Reply
  102. Sebastian

    Hi,

    thanks for the tutoiral. Has so far worked great.
    One more question. It would be good if the dropdown menu also opens when you click on the menu title. I thought this works with the code under “Option: Use Parent Menu Item As Toggle For Submenu”. I added the code in addition to the other one but unfortunately it has no effect. When I click on the menu item the complete menu closes again. So the dropdown opens only if I click exactly on the arrow.

    Do you have any tips on how this could work?

    Translated with http://www.DeepL.com/Translator (free version)

    Reply
  103. Seb

    Hi,

    thanks for the tutoiral. Has so far worked great.
    One more question. It would be good if the dropdown menu also opens when you click on the menu title. I thought this works with the code under “Option: Use Parent Menu Item As Toggle For Submenu”. I added the code in addition to the other one but unfortunately it has no effect. When I click on the menu item the complete menu closes again. So the dropdown opens only if I click exactly on the arrow.

    Do you have any tips on how this could work?

    Reply
    • Hemant Gaba

      Hi Seb!

      Thank you for bringing it to our attention. For now, to make the whole parent menu item to open sub menu toggle:

      ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
      width: 100% !important;
      text-align: right !important;
      }

      Let me know how it goes!

      Reply
  104. Tom Tom

    Hi Nelson,

    I really enjoyed this tutorial, the main code works wonderfully (replacing a hefty plugin that was conflicting with others!)

    My only problem is that the JS for “Use Parent Menu Item As Toggle For Submenu” doesn’t seem to be working for me.

    Could you take a quick look for me?

    Reply
    • Hemant Gaba

      Hi Tom!

      Apologies for the trouble. There was a little syntax error in the code. We have corrected it. The script should work fine now. 👍

      Reply
      • Brian

        Hi. I tried the parent toggle code today and it doesn’t seem to work. Please take a look and thank you! https://rainbowplays.com/

      • Hemant Gaba

        Hi Brian!

        Thank you for bringing our attention to the issue. I have updated the code above. Please use the one and see if it helps.

  105. Emaux

    Really helpful tutorial!

    I have only one problem, we have menu – sub menu and “sub-sub-menu”, sub-sub-menu shows expanded by defult and can’t collapse it, do you know why?

    Here you can check it: https://imgur.com/a/KCfmfhB

    The way to change the dropdown menu line (or border?) color at CSS is: border-top: [color] ?, the only way I know to change is to select the colour at Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Dropdown Menu Line Color.

    Reply
    • Hemant Gaba

      Hi Emaux!

      We are glad that our content helps you with your website. Coming onto the issue, for our better clarity could you please share the URL of the website for us to investigate further?

      Reply
  106. Richard

    Hi, thanks for this helpful tutorial!

    Is there any way to collapse the sub-sub menus? Parent and sub menu collapses perfectly, but we have 3 levels in our menu, the 3rd level does not collapse 🙁

    Reply
    • Hemant Gaba

      Hi Richard!

      The code works fine with every level of the mobile menu. Maybe the menu you’re using is customized in some way, could you please provide the URL of the page for me to investigate further?

      Reply
  107. Patrick Sweede

    The tutorial doesn’t work when menus contains 2 or more levels…….

    Reply
    • Hemant Gaba

      Hi Patrick!

      Can you please share the URL of the page so that I can check further?

      Reply
  108. Francesco

    Hello and thank you for the tutorial.
    I applied the directions and managed to get the result I wanted. However, I noticed that it is only applied to the first submenu level.
    In fact, if there is a second submenu level, the rule does not apply and the menu then becomes very long.
    Could you help me so that the second level is also closed and only opens on click?

    Thank you.

    Reply
    • Hemant Gaba

      Hi Francesco!

      Can you please share the URL of the page so that I can check further?

      Reply
  109. Payal Ahuja

    Hi Nelson, thank you for this tutorial. It is great and really helpful, after searching for the solution on the internet for 2 hours I found it and I love it.

    But I am facing an issue which is, whenever I open my website on mobile by default this menu is expending (opening without clicking)

    Could you please help me?

    Reply
  110. Maurice

    Hi Nelson,

    thanks for the wonderful code! I implemented it on our site https://fsmed-muenster.de – works great under Chrome/Edge but under Firefox I can’t get the icons for expanding and collapsing the sub menus to appear … we are also using W3 Total Cache, but after deactivating the plugin you still have to refresh the site every single time to get the icons to appear – do you know any solution to this?

    Best regards
    Maurice

    Reply
    • Hemant Gaba

      Hi Maurice!

      I have checked the page in Firefox and not able to replicate the issue. Can you please try disabling the minifying and combine JS and CSS options in the cache plugin and check again?

      Reply
  111. Boris

    Hello,

    First thanks for the well explained and useful tutorial – great job.

    I have only one problem. I wrote all the comments and tried everything nut nothing helped. At the moment the code for Use Parent Menu Item As Toggle For Submenu is not added as it doesn’t work.

    The problem is that when I expand the submenus and click on them it doesn’t open the link. Instead it only changes the close menu icon back to hamburger. It even doesn’t closes the menu.

    This i s the web page: https://investinbansko.com/

    Reply
    • Hemant Gaba

      Hi Boris!

      We have updated the code now. Please copy the updated code from above. The parent menu item should expand fine now on click.

      Reply
  112. Marcel

    Works perfectly and this saved me so much time. It would have taken me forever to figure this out. Thank you so much!!!

    Reply
  113. Juanma

    Hola Nelson,
    I have had this code working for a long time, but I have always tried to tweak it so that the Click on the word that accompanies the arrow works, but I have not succeeded.
    Do you have any idea how to fix it?
    Thank you so much!

    The website is https://strands.com

    Reply
    • Hemant Gaba

      Hi Juanma!

      Please add the following code for the fix:

      ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
      text-align: right;
      width: 100%;
      }

      Let me know if it helps!

      Reply
      • Juanma

        Hemant, thank you very much.
        It works perfectly!!!
        I had not thought that the solution could be in the css and I had been fighting with the js.

        Thanks again

  114. Echo

    Love this tut, thank you. How would I customize your JS so that I could add a sexy slide to the toggle? This toggle is such a jerky motion downward.

    Reply
  115. Maik

    Hi Nelson, great work! Can you tell how to adjust the toggle speed to get a smooth transition? CSS Transition is not working on display: none; element, so it has to be adjusted in the java code adding time and easing somewhere?

    Reply
    • Hemant Gaba

      HI Maik!

      I’m afraid changing the transition of the toggle sub menu needs hard customization. Yes, it can be done using JS. We’ll check further and update the guide. Stay tuned!

      Reply
  116. Oriana

    I freshly copy and pasted the JQuery and CSS just now, but my site on mobile doesn’t have an arrow you can click on in order to see the submenu items.

    Is there something I did wrong?

    Site: https://consumerenergysolutions.com/

    Thanks!

    Reply
    • Hemant Gaba

      Hi Oriana!

      I’m not able to find the CSS code in the source code. Please make sure it is added properly.

      Reply
    • Spencer

      I am having the exact same problem. I have actually used this code multiple times in the past. I came back to copy it for a new site and the dropdown is there on desktop, but not on tablet or mobile breakpoints. I even copied & pasted it three times and still not having any luck.

      Reply
  117. Sean Wilkins

    I think this was asked before but never answered on thread. Is it possible to have the sub-menu’s be animated slowly just like the main mobile menu on click?

    thanks

    -sean

    Reply
  118. Jessica

    What an incredible time saver. You are fantastic!!

    Reply
  119. Adrian Wirth

    Hi Nelson,

    Thank your for supporting me and the divi nation with your well explained and useful tutorial – great job!

    Also this mobile-menu coding works (almost) perfectly! But I have one issue: if the parent item is clicked instead of the arrow on the right side then the hamburger menu will close. How can I avoid this?

    URL: https://bsvweinfelden.ch/wordpress/

    Thanks for your help
    Adrian

    Reply
    • Hemant Gaba

      Hi Adrian!

      I have checked the issue on “Mannschaften” menu item and not able to replicate the issue. The toggle is working fine when clicking on the menu item. Is the issue resolved?

      Reply
  120. Kai

    Hi there, is there a solution for submenu’s under submenu’s. It doesn’t seem to work like with this code.

    Reply
    • Hemant Gaba

      Hi Kai!

      The submenu under the submenu’s should work fine. Can you please share the URL of the page so that I can check further?

      Reply
  121. conrado

    Hello Nelson I apply the code for Use Parent Menu Item As Toggle For Submenu, and works great thanks for that but I have several menus on my site and I like to Appli just in #mobil_menu1 I edit the jquery and also the CSS but is still working in all the site now I use media query because I using also the tutorial for the widget menu, so can you help me width that?

    Reply
  122. Romain

    Hello Nelson,

    I don’t know how you manage to provide such a lasting support for a free tutorial. You are really a great help for the DIVI community. Thank you so much.
    Well I’m asking for your help too with a small question about a problem with this tutorial : child menu items are not clickable

    https://artbatiz.fr/

    Reply
    • Hemant Gaba

      Hi Romain!

      I have checked the page and the submenu items are working fine now. Is the the issue resolved now?

      Reply
  123. Bhanu

    Hello,

    Thanks for the article, I have implemented the above code and it was fine, but when I create a child theme, the two icons are showing but on the main theme showing only one icon.

    Please suggest.

    Reply
    • Hemant Gaba

      Hi Bhanu!

      Can you please share the URL of the page so that I can check further?

      Reply
      • Hemant Gaba

        Hi Ernst!

        I have checked the page and the desktop sub-menu are displaying fine on click on parent menu items. If the issue persists on your end, please clear the browser cache.

  124. Jillian

    Thank you for this tutorial but I am having 3 issues:

    1. When I click the parent menu item instead of the icon it closes the whole menu.

    2. I changed the color of the toggle in the css but it does not reflect on the menu in any browser.

    3. I have sub-sub menus and they are automatically opened with the parent it clicked, rather than allowing a user to open them via the toggle.

    I have cleared cache in divi and and my browser and have tested in safari, firefox and chrome. Please help!

    Reply
    • Hemant Gaba

      Hi Jillian!

      Can you please share the URL of the page so that I can check further?

      Reply
  125. Tom

    Hi! First of all: Awesome blog, so helpful in many aspects.

    I lust applied your code. Works like a charm. Is there a way to unfold the next level also when clicking on the text? Right now, it only works when clicking on the icon….

    Reply
    • Hemant Gaba

      Hi Tom!

      We have provided the codes to open the submenu when clicked on the parent menu items. Please follow the script and CSS under Option: Use Parent Menu Item As Toggle For Submenu heading in the guide.

      Reply
  126. Glenn Skorko

    Hi Nelson,

    Thanks for sharing your solution. There are a lot of people looking for one that works dependably and your original CSS and jQuery is perfect!

    I tried adding the optional CSS and code and the menu was blank. I solved that by adding display:block to your .opened class and everything became visible. Unfortunately the links are dead on the sub-items in the menu in addition to their parent buttons. I believe there may also be an issue with opening and closing the menu with the optional add on.

    I had to remove the option but would love to use it if you circle back to it and get it working.

    Thanks again for a great solution Nelson.

    Glenn

    Reply
    • Hemant Gaba

      Hi Glenn!

      I have checked the code and there is no issue with it. The code must get conflicted with any other code on your site. If you still need help regarding it, please share the URL of the page to investigate further.

      Reply
  127. Simone

    Hi Nelson,

    I’ve been using these menu tutorials for a while and they always worked perfectly! I noticed a few days ago that the toggle on mobile was gone. I’ve checked all the codes and even deleted them and added them again. Afterwards the toggle is back again, but now when I open the first submenu, all the submenu’s underneath that one are open as well and I’m not able to close anymore. The toggles stopped working. Do you have any idea what my problem would may be?

    My link is: https://travelwithsimone.com/

    Reply
  128. Hemant Gaba

    Hi Simone!

    I can see the following script is also added which is not from our guide and causing the conflict with our codes. Please remove it and see if it helps.

    setTimeout(function(){
    jQuery(document).ready(function(){
    jQuery(‘li.menu-item-has-children’).click(function(){
    if(jQuery(‘li.menu-item-has-children’).hasClass(‘dt-open’)){
    jQuery(‘li.menu-item-has-children’).removeClass(‘dt-open’);
    jQuery(‘li.menu-item-has-children .sub-menu’).removeClass(‘visible’);
    jQuery(this).addClass(‘dt-open’);
    jQuery(this).find(‘.sub-menu’).addClass(‘visible’);
    }
    });
    });
    },500);

    Reply
  129. Andreas

    hey, thanks for providing such a function. I translate with google, hope you understand everything.

    unfortunately I have a problem. The “collaps mobile menu” does not load every time. from time to time only the categories without sub-items and without arrows are displayed.

    It just worked for a while, but then I updated the page and then it didn’t work again.

    please check my page:
    happyshrimp.de

    Reply
    • Hemant Gaba

      Hi Andreas!

      I’m not able to access the page due to the maintenance mode plugin enabled. However, please try clearing the plugin cache or even disable the cache plugin and check again.

      Let me know if it helps!

      Reply
  130. Yen

    Hi!
    Can you please tell me how can I get the top right corner arrow and the X button removed?
    Thanks in advance.

    Reply
    • Hemant Gaba

      Hi Yen!

      I’m not able to understand which arrow you’re referring to. Can you please share some more details?

      Reply
  131. Miguel Zavala

    Hello, I’ve been trying but I don’t get the buttons on mobile, but they do on the web when I reduce to mobile size.

    I can’t get the buttons to show the submenus

    http://www.intitrek.pe

    Reply
    • Hemant Gaba

      Hi Miguel!

      I’m able to replicate the issue on mobile devices. However, nothing can be seen while inspecting the page. Try disabling all the plugins and check again.

      Reply
      • Florencia Daniela Doyharzabal

        I had the exact same issue and I think I found the culprit: ACF by WP Engine. Kind of a bummer since I have all my custom posts and fields created with it. I wonder if there’s anything that could be tweaked in the jquery or css code since just thinking about getting rid of ACF at this point makes me cry. Anyway, this is probably too much to ask I know but just thought I’d share my experience!

      • Hemant Gaba

        Hi Florencia!

        Thank you for sharing the plugin with us. We’ll test the customization with the plugin for the issue.

  132. JODEY CORNWALL

    Hi I have set up the menu as per your instructions it all looks great only have one small issue it now says Menu above menu in the text and has created a section section

    Reply
    • Hemant Gaba

      Hi Jodey!

      Can you share the URL of the page to investigate further?

      Reply
  133. Florencia

    Hi Nelson! I’ve been using this code on many sites and I never had an issue until now. Strangely, everything works perfectly on my site pages but on posts (either built in or custom) it doesn’t. The toggle icons are just not there. I’ve been trying to troubleshoot for a while and even checked with Divi as I’m using the same global header for both pages and posts but so far no luck finding the answer. If someone in your team could take a look, would really appreciate it!

    Reply
    • Hemant Gaba

      Hi Florencia!

      Can you please share the URL of the page to investigate further?

      Reply
      • Hemant Gaba

        Hi Florencia!

        I can see that the script is not implemented on posts. You can check by adding the script in the console (it works there). You need to check if the script is restricted for posts. You can contact the Elegant Themes support so that they can check the script issue by remote accessing.

  134. Daniel T

    I’m a long time fan of your products as well as this tutorial. I’ve just noticed something though that I was hoping you may have a solution for. On iPads (tested 6-10) in vertical orientation, the hamburger menu shows, but the expanding arrows do not, so users cannot see the child items in them and clicking only opens the parent page. Perhaps the .et_mobile_menu class isn’t being invoked at those dimensions. Here’s the site I’m working on where I noticed this: https://dev.concretecountertopinstitute.com

    Any help would be greatly appreciated!!! Thanks so much!

    Reply
      • Hemant Gaba

        Hi Daniel!

        I have checked the console errors and can see that jQuery is getting blocked by the rocket loader feature of Cloudflare. Try deactivating the option and see if it helps.

      • Daniel Trimpey

        That solved it, thanks!!!!!!!!!

  135. Marek K

    Hello, I have a litte weird question. How to make the same menu work also on dekstop menu? I m currently working on website, where I have side slide menu and I want to work it also there but as hard I try, I cannot make it work also on desktop.

    Reply
    • Hemant Gaba

      Hi Marek!

      Can you share the URL of the page to investigate further?

      Reply
  136. Tasha

    Just wanted to see if you had a code that could close this menu if a person clicks outside the menu area, without having to scroll all the way back up on the menu.

    Reply
  137. Lasse

    Hi Peeaye´s 🙂

    Great tut and it works perfect1

    But: Is there a way that the “parent” link is not bold?

    I have both parent links with children under, and links with no children. And the parent ones are bold – it lookes kind a messy in the dropdown.

    Hope im clear – from Denmark, so mayby my gramma is “funny” 😀

    Reply
    • Hemant Gaba

      Hi Lasse!

      Please add the following code and see if it helps:

      .et_mobile_menu .menu-item-has-children>a{
      font-weight: 400 !important;
      }

      Change the font-weight value as per your requirement.

      Reply
  138. Amber Beardmore

    Hi there!

    I used the additional code to Use the Parent Menu Item As Toggle For Submenu but now when you click on the parent item and the submenu opens, you can’t click on any of the submenu pages.

    Reply
    • Hemant Gaba

      Hi Amber!

      It seems to be an overlapping issue on the submenu. Can you share the page URL to inspect further?

      Reply
      • Amber Beardmore

        Haus820.com – I had to remove the CSS & Javascript code that makes the parent a clickable toggle because our users weren’t able to click the sub-menu items. Do you need me to add the code back to re-create the error?

      • Hemant Gaba

        I have checked and the sub-menu is clickable on my end. Can you try using another browser and see if it helps?

  139. Klaus

    Hi Nelson,

    first of all, thanks for your code and your work.

    I use youre code on one site, but the toggle (+) signs are not shown on the start page.
    On other sites, it works fine.
    Do you have any idea?

    thansk a lot, Klaus

    Reply
    • Hemant Gaba

      Hi Klaus!

      Can you share the URL of the page so that I can investigate further?

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart