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!
Blog Post & Snippets: www.peeayecrea...
A Beautiful Way To Collapse And Style The Divi Mobile Menu
One of the most common requests from our popular Divi Mobile Menu Styling Tutorial is the ability to collapse the submenu items. So today I am showing you what I believe is the best and easiest way to do this. I’ll also add some great looking toggle icons and show you how to style those as well. This tutorial is best used along with some of our other Divi Menu Tutorials to get a well rounded beautiful Divi mobile menu.
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.
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.
Become a member of our Divi Adventure Club!
www.peeayecrea...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
Thanks for watching!

[@brianressler569]

Needed some tweaking having not followed the other tutorials, where it would change the icon of the mobile menu button itself when opened for instance, but it did the trick in the end thanks man

[@BennyHozjan]

Great Tutorial... you're the first one with this kind of tutorial where the collapsible is working too for mega menus! Well done Nelson... really well done. Thanks for this

[@PeeAyeCreative]

Thanks Benny!

[@shukrullah1981]

Super helpful. I saw similar things from other KZbinrs but unfortunately, none of them is working luckily yours is working fine. Highly appreciated your efficient video I become your subscriber and I did like it. comments, follow, and all notifications.

[@PeeAyeCreative]

That's great 👍 I'm so glad it works for you and I hope you enjoy all of our tutorials!

[@user-xx1mg7ib8x]

Brilliant! I'm new to WordPress and Divi and this is really easy to follow, thank you.

[@PeeAyeCreative]

That's great, welcome! I'm glad it was easy to follow!

[@xizzeewebdesign4951]

Exactly what I needed. Thanks for sharing the code and demonstrating exactly where to put it. It worked perfectly on the first try.

[@eq091801]

Another amazing tutorial. This was very helpful for me while building a menu on a recent project. Your tutorials on working with divi and customizing with css are the best.

[@PeeAyeCreative]

Thanks Edgar, I'm so glad you like the tutorials!

[@mmdwebsites6847]

This is so nice because i had a diferent code from before but this would not work while using the DIVI THEME BUILDER and this worked perfectly, thank you so much...

[@PeeAyeCreative]

That's great, so glad you can use this for the Menu module also!

[@MrMattuko]

AWESOME MAN! Thanks a lot ! Its a Great Tutorial

[@PeeAyeCreative]

You're welcome, so glad you liked it!

[@EhsaasSchlorship]

Amazing Channel Outstanding information provider. and also tell makhan method.

[@twsuicy]

O M G. This has to be heard and go viral. You literally save my life Nelson, thanks a million!

[@napcousa]

Thanks for posting, very helpful and easy to follow!

[@PeeAyeCreative]

You're very welcome!

[@marciaturley2850]

You're so talented. It was a great tutorial. Thank you so much.

[@PeeAyeCreative]

You are so welcome!

[@moussamhanna]

thank you for this amazing tutorial

[@PeeAyeCreative]

You're very welcome!

[@gusyacoub7495]

Thank you SO much!!! This is exactly what I was looking for.

[@PeeAyeCreative]

I'm so glad you like it, you're welcome!

[@gurushankar2004]

Thank you so much. Do provide more such tutorials.

[@PeeAyeCreative]

You're welcome, will do!

[@gurushankar2004]

@@PeeAyeCreative Thank you so much

[@todowebsalta]

Excelent as always. A very useful tutorial for the collapsible menu. Marcelo from Argentina.😃

[@PeeAyeCreative]

Glad it was helpful!

[@alyonarutzen2563]

So helpful, easy and fast!! Really well done. Thank you!

[@PeeAyeCreative]

You're welcome!

[@chiranjivichaudhary8707]

wow, thanks for video, this tutorial help me lots.

[@PeeAyeCreative]

You're welcome!

[@leandrogcosta]

Great! Congratulations on your interest in teaching

[@PeeAyeCreative]

Thank you!

[@newhampshirelivefreeandexp4463]

Thank you for this video! It was not something I was looking forward to but your video made it a cinch!

[@jesslynthessner1467]

great tutorial. thank you

[@PeeAyeCreative]

You're welcome!

[@nenadvracaric2994]

THANK YOU good man for this video and all other great knowledge you share!

[@PeeAyeCreative]

You're very welcome!

[@lydiapali]

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!

[@laembajadatiendamexicana998]

Did you get any answer? It happens the same to me.

[@belikovajulia]

Same here

[@PeeAyeCreative]

Hi Lydia, in general if you can ask code related questions on our blog it would really help me out and you will get a better response. Thanks!

[@flaviocavaleri749]

Thank you Nelson. Perfect for me!!

[@PeeAyeCreative]

That's great to hear!

[@renes3654]

Amazing Tutorial, everything works perfectly fine! But, do you have a solution for the parent menu items ? The child menu items only open, when I hit the toggle. When I click on the menu item (parent) itself, the menu just closes. Would be great if the child items would also open if you click on the parent item text. Hope it’s understandable 😂

[@jamesdowling6957]

I had the same problem. Codes here helped fix it for me and menus working good on mobile now, for anyone else in the same situation. kzbin.info/www/bejne/aXq0XpVol6qkr8k

[@jakubkrivohlavy9012]

Yea.. And the submenu should stay open, if i am on some submenu page.

[@danielvanginkel7081]

Great tutorial! One question I keep running into though: where do the lines underneath each list item in the menu come from? I can't seem to get rid of those lines. Does anyone know?

[@tommymiller1180]

Hi Daniel, I have the same issue. I can't see any down arrows, just grey lines in the centre of the menu item. did you find a solution for this? Thanks

[@PeeAyeCreative]

It is a border bottom on the list items "li"

[@mariajandersen5387]

Loved this! So easy and fast!! Thank you

[@alpasc]

Thanks you soooooooooooooooooo much ! not the first time that you save me with your tricks... i just put your website in my favs ;-)

[@samfabio]

That was amazing bro! Thanks and keep going

[@PeeAyeCreative]

Thanks! Will do!

[@jamilajones6383]

Thanks so much for this, really really helpful

[@PeeAyeCreative]

You're very welcome!

[@DocWilsonDesign]

Really nice tuts, thanks so much for the share!

[@abelbeyene7573]

Great tutorial thank you!

[@PeeAyeCreative]

Glad it was helpful!

[@kismelwin6664]

THANK U SO MUCH!

[@PeeAyeCreative]

You're welcome!

[@lovepixelagency]

Worked like a charm!

[@PeeAyeCreative]

Awesome, thanks for sharing!

[@whitehurstw]

Is there something additional to add to the code as the 2nd and 3rd tier dropdown parent menu items are not clickable but the 1st tier is? Thanks

[@rahatali2335]

Thank you soo much, Sir. Actually I am having same issue what Elementor. When I refresh or load any page, the dropdown menu expends for a sec, and collapse automatically. I tried many things but couldn't fixed. Will this work with Elementor?

[@PeeAyeCreative]

I don't know about other builders but I'm sure a similar principle would work although with different selectors.

[@maccatabay270]

i tried this and it works. the problem here is that when you click the entire row with dropdown other that the icon, it closes. any ide why?

[@spitsparrow]

I used the snippets and it all works well. But is the menu item that now has collapsed sub menus is always bold and the little arrow next to it is green. I need to change both these things. I would like the menu item to not be bold and the colour of the icon to not be green. I cant find in the code where to change it

[@edwardcraven9114]

Great tutorial, thanks. All of my submenu text is right aligned. How do I move it to the centre or left align it? Thanks

[@PeeAyeCreative]

Hi Edward, for styling the mobile menu we have a separate tutorial, I suggest checking that out: kzbin.info/www/bejne/Zn62hWuef52gZrM

[@MitchRue]

YOU ARE A TRUE HERO!

[@PeeAyeCreative]

Thanks ;)

[@yabadabaduunggawa966]

Hi. How to make this work properly with gtranslate plugin? When i set gtranslate to show along with the menu, the gtranslate dropdown list wont show. Thanks

[@phaj7676]

How can i slide-in my hanburguer menu in desktop for divi with css

[@glyndonsanders8432]

good day. This tutorial is very helpful but I want to ask is there a way to apply this one to a vertical menu that serves a side bar or can we apply this to the side bar itself?

[@neidacollege-narendradefen5664]

Thank you

[@PeeAyeCreative]

You're welcome

[@christianhimmer]

Thanks as always dude ... Can you do a tutorial for the logo on menu???

[@PeeAyeCreative]

Thanks Christian! What would you like to see about the logo?

[@PeeAyeCreative]

That's a good idea, I'll see what I can do!

[@astousylla6412]

Great tutorial thank you

[@PeeAyeCreative]

You’re welcome 😊

[@AdvanceWebSolutions]

Great tutorial a lifesaver thank you. How would you do this though if you're using the Divi theme builder, it doesn't seem to work for that thanks!

[@PeeAyeCreative]

What do you mean?

[@doeyehof]

@@PeeAyeCreative it only works for the original menu not the theme builder menu.... and I know why because I use an vertical menu from you other tutorial

[@AsitAithal]

Thanks for saving my day!

[@pihl8661]

Thanks! Worked great.

[@PeeAyeCreative]

You're welcome!

[@mustafak4378]

How can i make the submenu expand on mobile by pressing on a menu item with a custom link of # instead of pressing the icon??

[@ericjunge]

Same question here - I have a customer that does not like the icon expansion and wants the submenu to expand when you click on the top menu item. Thanks in advance

[@mustafak4378]

@@ericjunge I have found a trick solution for this myself. Not sure if it’s the right way to do it, but it works. I’ll post it here later today.

[@lauretomben298]

Thank you so much !

[@PeeAyeCreative]

You're welcome!

[@leninrodriguez4765]

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

[@MasterTecnologi]

Excelente tutorial

[@PeeAyeCreative]

Thank you, glad you like it!

[@ScottFichter]

Thank you!!!!!!!

[@PeeAyeCreative]

You're welcome Scott!

[@Georgia.Cherri]

Is it possible to add a transition when opening the parent? So it doesn’t open instantly but more smoothly?

[@abmarketing8952]

How would you change the new submenu dropdown icon? The one with the green arrow. Is it custom code? Can't find directly in the theme builder

[@PeeAyeCreative]

That's an ETModules icon (the Divi font family) and the icon is in the CSS code, so you can easily change it there.

[@nbroberts97]

ugh i wish divi had an option to change header format based on device

[@YounEnvouteuse]

thanks you so much !

[@PeeAyeCreative]

You're welcome!

[@fishionboy9911]

Awesome! Thanks

[@PeeAyeCreative]

You're welcome!

[@sonatonifans]

Thank you sooooooo much

[@PeeAyeCreative]

You're welcome!

[@izkuhl]

finally a good tut

[@PeeAyeCreative]

I'm glad you like it!

[@NaysTutor]

thank you!

[@PeeAyeCreative]

You're welcome!

[@fahadkhalid2120]

it worked, thanks

[@PeeAyeCreative]

You're welcome!

[@Mralienlaf]

ESPECTACULAR

[@PeeAyeCreative]

I'm glad you like!

[@sohaibromi2671]

Thanks, buddy. It's helpful for me

[@PeeAyeCreative]

You're welcome, I'm glad it is helpful!

[@badura72]

Thanks! Worked fine and helped a lot...but :-) I've got two (not one) little down arrows...tested it on serveral installations. Do you have any idea why? Thx

[@BennyHozjan]

because there is a missing \ means it should be \33 or \4d instead of 4d for example

[@badura72]

@@BennyHozjan Thx!

[@PeeAyeCreative]

Yeah that is a common bug with pasting code into Divi.

[@BennyElimelech]

When i changed content: '32'; to \32, and content: '33'; to \33 it fixed for both directions tnxx

[@user-uk6se2rk4s]

just awesome!

[@PeeAyeCreative]

Glad you think so!

[@BennyElimelech]

Hello very good tutorial thank you man:) i try to fix that code to my site from right to left letters... and its getting big mess// the arrows are on the letters on the right side. how can i fix the arrows to be on the left side? is there an easy way for that in divi?

[@BennyElimelech]

I got it fixed some css tnx

[@PeeAyeCreative]

Hi Benny, glad to hear you got it.

[@filipsil8262]

worked thanks

[@PeeAyeCreative]

You're welcome!

[@InsideSchoolForum]

I really need your help, sir. I did use your snippet and everything was working well until a few days ago the mobile menu and logo stop showing. I have tried all I can to make it to work but I can not do it. Can you please help me with a fix to it. The menu is working well on pc but not on mobile.

[@PeeAyeCreative]

I'm guess the issue is related to the recent WordPress 5.6 update. Be sure to update Divi and report any bugs to Elegant Themes.

[@InsideSchoolForum]

@@PeeAyeCreative ok sir. I will check right a way for an update

[@sauravramofficial]

it worked but mine is shoeing 2 drop icon instead of 1 ..something like this vv instead of just v

[@PeeAyeCreative]

Okay did you check if Divi is stripping out the \ forward slash in the code? You can see about that in the blog comments.

[@sihamcosmeticsbio2947]

Merci je viens de faire parfait

[@PeeAyeCreative]

You're welcome!

[@AlotoSumi]

how to use the Et module font ? to change the signs to + - please

[@PeeAyeCreative]

You can use any of them here: www.elegantthemes.com/blog/resources/elegant-icon-font

[@AlotoSumi]

@@PeeAyeCreative my menu is collasping but the icon is not showing . just a white circle . could you please help me ?

[@AlotoSumi]

and when i try to upload the fonts , they arent premitting because of the security reasons

[@XxWacadexX]

doesnt work on my site.

[@alyonarutzen2563]

Danke!

[@PeeAyeCreative]

You're welcome!

[@regiestry6575]

Hi, is there a way to make the parent link, clickable too? thanks!

[@PeeAyeCreative]

It already is clickable, I have not altered that in this tutorial.

[@regiestry6575]

@@PeeAyeCreative thanks, but I'm confused it's not working on me. I mean instead of just clicking on the icon on the left, I can also click on the label of the parent link, then it should do dropdown the submenu.

[@ninadebey2185]

merci !!!!!!!!!!!!!!

[@PeeAyeCreative]

You're welcome!

[@SINGRAISOREN-tm3uo]

What is collapse minu mean

[@PeeAyeCreative]

Check the video and you will see! 🙂

[@Jordi_SP]

¿por qué me sale el título del vídeo y descripción en español, si el vídeo es de un inglés de habla inglesa? youtube es un puto troll...

[@emmtalarico3491]

damn as a developer - this solution sucks. I get its meant for common folk and it works well in that use case. This clearly is a blind spot for divi.

[@PeeAyeCreative]

I'm not sure how this solution would differ for developers vs common folks. It's also not a blind spot, they are fully aware of these things.

[@emmtalarico3491]

@@PeeAyeCreativegood devs are going to write a child theme function or a plugin extension to cover this and likely would avoid using jQuery or recommend that the client uses native Gutenberg instead. A good dev isn't going to inject code into the browser even if its just css. You can be aware of a problem and not care about correcting it and that is a blind spot. Hope that helps!

[@PeeAyeCreative]

Your statements are very odd, and quite frankly, wrong. A developer would certainly not do what you said. I'm not sure where your comment is coming from, but it's really strange.

[@emmtalarico3491]

@@PeeAyeCreative lol suggested use of Gutenberg which has been native to WordPress for a number of years now is a strange comment? 🤔 Got it.