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

How To Collapse Divi Mobile Menu Submenus

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

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

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

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

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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;
}

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

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!

93

Last updated Jan 29, 2022 @ 1:27 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 :)

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

219 Comments

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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart