How to Create a Mobile Collapsing Nested Menu with Divi’s Theme Builder
ฝัง
- เผยแพร่เมื่อ 23 ม.ค. 2020
- A while back, we shared a mobile menu hack that helps you create a collapsing nested menu. We know many of you have used it, but with the new Divi Theme Builder, the approach becomes slightly different. In today’s tutorial, we’ll show you how to apply a mobile collapsing effect to the Menu Module inside the Divi Theme Builder. There are three main parts to this tutorial:
Setting up your menu and assigning the correct classes to your menu items
Building your menu using the Theme Builder and Menu Module
Adding the custom code inside the Theme Builder
You’ll be able to download the template JSON file for free as well! Let’s get to it.
Read more: www.elegantthemes.com/blog/di... - แนวปฏิบัติและการใช้ชีวิต
![หมานแต่ผัวเขา - แสตมป์ โตเกียวมิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/m0g1TSBJPgo/mqdefault.jpg)
But you didn’t show how it looked on a mobile device?
I found the mobile view now: just click on the blog post link and you can see it :-)
Gotta love ET.
You can check out the menu on this site: www.mach2.pro
Is it too much to ask to have a simple selector in the back end to activate/deactivate collapsing nested menus for mobile - without having to go through all this?
I agree, I would like to see this natively build into Divi as a module for theme builder.
Agreed. The theme builder needs a lot of work, still.
Agree!
I completely agree! Divi is powerful but it feels like they just dropped the ball with some things (ex. contact forms and the menu). It makes me want to go back to Wix because that's literally drag and drop and it doesn't take forever to customize the menu or mobile vs desktop version. They have a downside as well but when it comes to design it's clear cut.
This is why I prefer Elementor, Divi is an actual ball ache to work with.
Worked perfectly. Dont forget to add and tag in the code module. Also for a regular single row menu (not all there columns) change width to 100% from 265% and I set the margin to 0px instead of -65%
Thanks! Now it's working
I think you forgot the main part of this video, showing us how it looks on mobile.
it works
Agree! a 10 minute tutorial about designing your header but really confusing how to create the collapsing menu...
I modified the collapsible mobile menu code to work with the actual Divi Theme Builder.
Try to paste the code below in WP Admin > Divi > Theme Options > Integrations > Add code to the body:
header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
(function($) {
function setup_collapsible_submenus() {
var $menu = $('header .et_mobile_menu'),
top_level_link = 'header .et_mobile_menu .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
Where did you find this code
Legend! Thanks dude
Thank you so much
Genius. Great fix!!
You rock man, thanks a lot
It seems divi is good but sadly lacking for making mobile menus
Must people use mobile or tablets now and divi don’t really cater for these - I don’t want to play around with css or Java script.
Going to look for another builder
1. Is it possible to click on a parent to open a site or just sub menu items linked to pages? 2. I tried it and just didnt show the icons. Perhaps something changed since the tuturial?
So the title is how to create a "Mobile Collapsing menu" but you only give us a tutorial of how to create a good looking header but nothing there for mobile?
Doesn't work. I goes off the screen
I find out that if you add a new section above the menu and click plus button on mobile. It acts a little bit strangely. Could you fix this problem
Is there a way to add this to mega menu - sub items? For both desktop and mobile?
Its only for first and second level? what abour of other levels on the menu? I thnaks a lot for your time...
Hi MAK. I am using Revolotion Slider. I made the menu in this video, but the drop down menu is left behind. What's the solution. Thank you.
If i press Services in your menu will it then go to services page? Lot of other solutions does not work
This code is wrong: haha width 230% margin-left: -65% why!?! when I put these to 100% and 0% it works.
why cant just divi add such features by default in divi layout...SUCH A DRAIN OF TIME N ENERGY FOR SMALL THINGS
Ok when I add the code it blows up my mobile menu... Completely not workable! Also when you click the cross what I can see the whole site is going up again, so when you have a big header the menu is not visible...
How to import this menu designed by you into my divi account? How to build a menu text importing from a text or word file.
It doesn't work on Apple devices (iPhone, iPad). If I touch the "+" sign, the menu closes instead of opening the submenu. Have anybody got a solution for this issue?
I'm curious to know if you found a solution to not being able to toggle the submenu open and closed. That's what I assumed the "+" is for, but it doesn't work.
Hello, the script code does not seem to work on my website. The menu does not collapse, it remains completely open.
I am using the latest version of WordPress 5.8
Could it be due to the WordPress version? Can you help me with this?
Thanks
All itens start openned at mobile version... Dont loose your time guys... Who spend 10 min in a MOBILE MENU tutorial and dont show at the final of video the MOBILE MENU ???
hi Mak. not working with my MEGA MENU :(
How did it look on mobile device. ? how does 'collapsing nested menu' differ from the ordinary menus. The 'final example' went too quickly for me to catch what value it really added? Just linger a little longer on the 'final example will look like this' part of your videos would help. Otherwise your content is always excellent.
Hi, I designed my website following your tutorials, I have a problem with my menu on mobile though, I have lots of items in it and It is not scrollable. Can it be down to the fact that I have a sticky header? If so how can I fix it?
I'm curious if you found a solution to this issue.
Also my submenus are not collapsed. So wondering how that works. If you know anything, let us know. :-)
thank you.
Is it possible to use this for a sidebar menu instead of a mobile menu?
Also, what the heck happened to the end. You spent the whole video creating a mobile menu and then didn't show it on mobile?!?
I followed the instructions but on a header that I created and it didn't work for me. The drop down menu moved to the left and out of the screen so I cannot even see if its collapsing or not. I wish that Divi would make it more simple as most users view it on phone.
Hi, I'm looking for to add this feature in to a standard divi menu (without using global header menu) is there a tutorial for this? thanks!
I have some code to add
th-cam.com/video/9OERICjLWC0/w-d-xo.html&ab_channel=Joaqu%C3%ADnBarber%C3%A1Aledo
th-cam.com/video/GxQalNngEmY/w-d-xo.html&ab_channel=ElegantThemes
somehow it didn't work in my case on the mobile version. I am not able to see a + sign i.e. for drop-down on the mobile side. Can you pls help me with this? I have quite bigger submenu items in my list.
Hi there! 😊
You can download the Layout from this Article and import the JSON file right to your website:
www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
If you have any other questions, get in contact with our Support Team by opening a ticket in the Members Area:
www.elegantthemes.com/members-area/
Hi. I did it, but just show the symbol "+" and it doesn't do anything, the me menu shows it expanded. someone can help me please. Thanks.
already I did it, just it was missing the CSS "second-level"
I need the real nav in the slide, including collapsible sum mebnu - I hd to hide the nav.mobile, but I
d rather style it to become a slide menu, truggered by script. Because I need activation button in the footer.
This really SUCKS, for years, at least 3, Divi refuses to fix this crappy code, instead, there are companies out there charging $20 for a one site plugin. Why can't Divi fix this? We pay good money for the builder, yet needed fixing like this is not done. I have a site with a menu, sub-menu, and sub, sub-menus that looks like shit, and I'm forced to buy the damn plugin. I've requested this fix since 2017 and NOTHING.
Have you found a fix? Because this video didn't work for me.
fabulous, hay que modificar el codigo en cuanto a tamaño. Además de escribir al menu secundario, second-level....
how about a tutorial on how to do a mobile slide in menu instead of the default drop down hamburger menu.
Divi should include that as a module. They really need to work on getting the mobile menus to improve....
did anyone make it work? more than 7 minutes showing how to visually design something that is totally unrelated to the title of the video.
I got the nested menu item to work right away. But I had to do a lot of tweaking to get the actual menu to display correctly on various mobile breakpoints. Rather than spending 90% of the video on styling stuff, it would have been more helpful to see how to tweak the embedded css for styling the mobile drop down containers for various breakpoints. I finally figured it out, but took some time.
How do you make a mobile drop-down menu where you can still have a parent menu that is clickable? The way this menu works, you can't click on the parent link once you toggle the menu open, so a mobile user has no way to reach your parent page. Some themes have this functionality built in and let you create a clone of the parent in the sub-menu, on mobile only. I am surprised that that mobile menus are so cumbersome on Divi themes. The steps of adding code and js is basically a hack. Why can't all this be built into the theme?
Doesn't work for me
Dont have colapse feature, fake video... And this is why the guy dont show at video final mobile experience with this... Disgusting -''
I can confirm that the solution works!
why do I need to use css and js for simple dropdown design?? "DIVI SUCKS !!!"