How To Collapse Divi Mobile Menu Submenus
HTML-код
- Опубликовано: 19 окт 2020
- 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.peeayecreative.com/how-to...
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.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Thanks for watching!
![Lp. Последняя Реальность #79 ГЛАВНАЯ КОМНАТА [Кабинет JDH] • Майнкрафт](http://i.ytimg.com/vi/EamqlTZggfQ/mqdefault.jpg)
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
Thanks Benny!
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.
Thanks Edgar, I'm so glad you like the tutorials!
Loved this! So easy and fast!! Thank you
Exactly what I needed. Thanks for sharing the code and demonstrating exactly where to put it. It worked perfectly on the first try.
Thank you for this video! It was not something I was looking forward to but your video made it a cinch!
So helpful, easy and fast!! Really well done. Thank you!
You're welcome!
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
this is the only video that solved the actual issues thanks so much bro you are the best
So glad to hear that, you're welcome!
Thanks for posting, very helpful and easy to follow!
You're very welcome!
You're so talented. It was a great tutorial. Thank you so much.
You are so welcome!
That was amazing bro! Thanks and keep going
Thanks! Will do!
Thank you Nelson. Perfect for me!!
That's great to hear!
AWESOME MAN! Thanks a lot ! Its a Great Tutorial
You're welcome, so glad you liked it!
Thanks for saving my day!
Excelent as always. A very useful tutorial for the collapsible menu. Marcelo from Argentina.😃
Glad it was helpful!
Super helpful. I saw similar things from other RUclipsrs 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.
That's great 👍 I'm so glad it works for you and I hope you enjoy all of our tutorials!
Thank you SO much!!! This is exactly what I was looking for.
I'm so glad you like it, you're welcome!
O M G. This has to be heard and go viral. You literally save my life Nelson, thanks a million!
Thanks you soooooooooooooooooo much ! not the first time that you save me with your tricks... i just put your website in my favs ;-)
Brilliant! I'm new to WordPress and Divi and this is really easy to follow, thank you.
That's great, welcome! I'm glad it was easy to follow!
Great tutorial thank you!
Glad it was helpful!
Really nice tuts, thanks so much for the share!
THANK YOU good man for this video and all other great knowledge you share!
You're very welcome!
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...
That's great, so glad you can use this for the Menu module also!
Amazing Channel Outstanding information provider. and also tell makhan method.
thank you for this amazing tutorial
You're very welcome!
Thanks so much for this, really really helpful
You're very welcome!
great tutorial. thank you
You're welcome!
Worked like a charm!
Awesome, thanks for sharing!
Thanks! Worked great.
You're welcome!
wow, thanks for video, this tutorial help me lots.
You're welcome!
Thank you so much. Do provide more such tutorials.
You're welcome, will do!
@@PeeAyeCreative Thank you so much
Great! Congratulations on your interest in teaching
Thank you!
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?
Excelente tutorial
Thank you, glad you like it!
Great tutorial thank you
You’re welcome 😊
THANK U SO MUCH!
You're welcome!
Thank you so much !
You're welcome!
Awesome! Thanks
You're welcome!
YOU ARE A TRUE HERO!
Thanks ;)
Thank you
You're welcome
thank you!
You're welcome!
thanks you so much !
You're welcome!
it worked, thanks
You're welcome!
Thank you!!!!!!!
You're welcome Scott!
just awesome!
Glad you think so!
Thank you sooooooo much
You're welcome!
Is it possible to add a transition when opening the parent? So it doesn’t open instantly but more smoothly?
worked thanks
You're welcome!
ESPECTACULAR
I'm glad you like!
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
finally a good tut
I'm glad you like it!
Great tutorial, thanks. All of my submenu text is right aligned. How do I move it to the centre or left align it? Thanks
Hi Edward, for styling the mobile menu we have a separate tutorial, I suggest checking that out: ruclips.net/video/0MST8hJ8m0Q/видео.html
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
That's an ETModules icon (the Divi font family) and the icon is in the CSS code, so you can easily change it there.
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
Danke!
You're welcome!
How can i slide-in my hanburguer menu in desktop for divi with css
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!
What do you mean?
@@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
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
Thanks, buddy. It's helpful for me
You're welcome, I'm glad it is helpful!
Thanks as always dude ... Can you do a tutorial for the logo on menu???
Thanks Christian! What would you like to see about the logo?
That's a good idea, I'll see what I can do!
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?
I don't know about other builders but I'm sure a similar principle would work although with different selectors.
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?
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
It is a border bottom on the list items "li"
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?
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
because there is a missing \ means it should be \33 or \4d instead of 4d for example
@@BennyHozjan Thx!
Yeah that is a common bug with pasting code into Divi.
When i changed content: '32'; to \32, and content: '33'; to \33 it fixed for both directions tnxx
merci !!!!!!!!!!!!!!
You're welcome!
Merci je viens de faire parfait
You're welcome!
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.
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.
@@PeeAyeCreative ok sir. I will check right a way for an update
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?
I got it fixed some css tnx
Hi Benny, glad to hear you got it.
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!
Did you get any answer? It happens the same to me.
Same here
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!
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??
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
@@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.
it worked but mine is shoeing 2 drop icon instead of 1 ..something like this vv instead of just v
Okay did you check if Divi is stripping out the \ forward slash in the code? You can see about that in the blog comments.
how to use the Et module font ? to change the signs to + -
please
You can use any of them here: www.elegantthemes.com/blog/resources/elegant-icon-font
@@PeeAyeCreative my menu is collasping but the icon is not showing . just a white circle . could you please help me ?
and when i try to upload the fonts , they arent premitting because of the security reasons
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 😂
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. ruclips.net/video/3IQ-b2bEqyg/видео.html
Yea.. And the submenu should stay open, if i am on some submenu page.
Hi, is there a way to make the parent link, clickable too? thanks!
It already is clickable, I have not altered that in this tutorial.
@@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.
doesnt work on my site.
ugh i wish divi had an option to change header format based on device
What is collapse minu mean
Check the video and you will see! 🙂
¿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...
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.
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.
@@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!