“On desktop it opens the blog..but mobile shows the collapsed menu”. Copy and paste the Javascript code below into your website’s Divi Theme Options  > Integrations > Add code to your blog. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. If you put it in your child theme stylesheet, be sure to clear your cache and refresh and it’ll work. font-weight: 700; First make sure to clear cache and refresh browser. If you’re using the theme builder, this doesn’t work but I’m going to post a revised code for that soon. Any updates to achieve this for the new menu using the Divi Theme Builder? 2. I uploaded Divi to Version: 4.0.6 and now it works! Divi Toolbox Mobile Collapse Nested Submenu . 80+ Divi Footer Layouts. Out of curiosity, is there a way to make the first section open by default? Here goes a little tutorial to achieve something i was asked for on a facebook forum. Open its settings and then go to Advanced Tab > CSS ID & Classes and Add “reveal1” to the CSS ID. padding: 10px 20px; Feel free to request for help in my Divi Facebook Support Group! Thanks for... Continue reading → setTimeout(function() { 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. What should I do since 50% of population use safari on iPhones and I cannot allow this problem to last? Thank you!! Great job. Love the tips on how to minimize the mobile menu even if it is a decent size, still a good idea to add this code to keep it simple!! However, the jQuery still knows about the last (on mobile hidden) level, thus the plus sign is still shown. Sections are the biggest building blocks in the Divi builder. This is perfect for achieving that “broken grid” effect and adding another level of novelty to a Divi … Any hint would be of help – thanks so much! Divi Den Layout Bundle $ 55.50 Tags: 1 (one) page, divi-den, layout pack, modules, sections. If I clicked on it, the subitems did not appear. Yep here’s the code for the theme builder! It works with Divi 4.0.6 and higher. But the revised code that DOES work with the theme builder is below in option 2 . I´m facing something different and hope you can help me… Im using a custom child theme and cant figure out if there is a different class identified with the custom menu incorporated with the them. solved it for me on Divi 4.0. Thank you Josh. Their solution is great; however, it has one small flaw, which is clear in the comments section: it doesn’t allow users to create several collapsible components on the page. 075 – The Ins & Outs of Running A Website Maintenance Plan with Stephanie Hudson, Best Divi Facebook Groups to Join in 2020, 5 Ways Divi Changed my Business (and Life). That can be easily done via CSS and media queries. How To Collapse Divi Menu Module Submenus And Keep Parent Links Clickable On Mobile November 3, 2019; New Divi Section Layout: The Bottom Navigation Bar 5 October 30, 2019; New Divi Section Layout: The Bottom Navigation Bar 4 October 29, 2019; New Divi Section Layout: The Bottom Navigation Bar 3 October 25, 2019 View Contact Form Documentation Let me know if you try it out. In this tutorial I’ll show you How to Create a Mobile Menu Collapse Effect in Divi. We can do this by adding some jQuery and CSS code. reason cold be conflicting code i have lots of code on there. Before you can add a section module to your page, you will first need to jump into the Divi Builder. }. 50 Divi Team Styles. Thanks so much for this, after a couple of attempts I got it to work! $(‘.et_mobile_nav_menu .menu-item-has-children > a + span’).on(‘click’, function(event) { Get Me Marketing 181 Wylds Lane Worcester Worcestershire WR5 1DZ, T: +44 1905 350 186E: daniel@getme.marketing, Our website uses cookies to improve your experience. In short, the CSS below controls the styling of the actual mobile expand/collapse icons and the jQuery provides the actual expand/collapse function. }, 700); This is ok but not what this code is for. $(this).next(‘.sub-menu’).toggleClass(‘hide’,1000); Customize the mobile menu with this easy to follow Javascript and CSS snippet! background: #86d598; /**** This gives a background color of your choice to the submenu ****/ For those people, like myself, that wanted a background color there is a quick and easy fix: to the same code: .et_mobile_menu .menu-item-has-children { $(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000); }. The code shown in the tutorial DOES NOT work with the Divi Theme Builder as I created this before that was released. looks interesting and apealing but View Feature Section Documentation. There are some small issues/requests I am hoping you can comment on. cursor: pointer; Simply save and start editing with the Divi Den Pro Plugin and layout library. OG Menu Collapse Method – MZ Creative Studios, Additional Menu Collapse Method – Elegant Themes, https://divilife.com/create-fixed-mobile-menu-divi, 077 – Doubling Income From a Web Design Side Hustle With Chris Misterek. This is easy to do in Divi with a quick little tip, and I’m going to show you how to make your Divi hero section full height. Hi Yeah doesn’t work with the theme builder. content: “\4c”; Join my Divi Web Designers Facebook group to get free support and to be automatically plugged into an awesome, supportive community of fellow Divi/WordPress web designers! display: block; font-size: 20px; I really need a collapsing mobile menu. Usually you just need to clear cache and refresh browser. Here’s an excerpt of the article, In this Divi Quick Tip we show you how to create a module that appears to overlap two sections. In my site the expand is not working color: #000; Here, we show you how to do 5 cool things in Divi with anchor links, including how to open an accordion item, link to page sections, and more. Great to hear, Mark! At first: it is a great work, thank you! 20 Feature Section Style. This tutorial is based on a blog post produced by. But this (from 2016) does. can you help me? Not sure why elegent themes havent built this into Divi the mobile menu looks aweful out of the box. } The bold category does prompt the user to click to see more, and from there shows the sub-categories. content: “\4d”; }, span.menu-closed.menu-open:before { $(window).load(function() { In short, we’re going to use a little CSS and jQuery to make this happen. Hey Josh, Hey Vicky sounds like you might just need to refresh your browser and clear cache! It worked flawlessly. background: transparent; it did not work! Fortunately, we have come up with a solution! Best regards. 50 Divi Blurb Styles. font-family: ETmodules; Required fields are marked *. Your posts and videos have always been a great source of inspiration. Ah good question. Drag & Drop these ready-to-use Blocks and build your perfect web page. It seems common for church websites to have a “new here” section, hidden but … I see this problem with browser crossing because I like to test everything and everywhere. Fortunate there is a simple trick to make the first toggle also closed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. $(‘.et_mobile_nav_menu .menu-item-has-children > a’).after(‘‘); Join my mailing list and get exclusive discounts to my courses, layouts & more. CommentJosh, you are my hero today. I love all your tips and tricks. However, you won’t preview the Section as Accordion/Toggle in the visual builder. i dont know what to do. color: #111; Their solution is great; however, it has one small flaw, which is clear in the comments section: it doesn’t allow users to create several collapsible components on the page. Why Choose Our 320+ Ultimate Divi Modules UI Bundle Styles? This tutorial is a minor variation of a tutorial I found on creaweb2b.com called Custom Toggle Section In Divi. Making submenus collapse keeps the long mobile menus clean and responsive It works with the Divi menu module and standard Divi header. Try Out The Drag & Drop Page Builder for FREE! Thank you again Josh! thank you! . This is what happens when this setting is enabled: second-level menu items are hidden on mobile; an arrow icon is added to the parent element; once clicked, it shows the submenu; the parent element is still a normal “clickable” link; a new customization panel is added to the Toolbox Customizer. Aenean ipsum orci, mollis et felis et, eleifend egestas purus. Some layouts can be imported to the Divi layout library and some are available directly within the Divi Builder itself as predefined layouts. Nulla semper accumsan lacus, et varius justo gravida pellentesque. This tutorial is based on a blog post produced by Divi Notes, where they explain how to create a single collapsible module, section or row with the click of a button, using the button module or call to action module. If you don't want us to use cookies simply click reject. 2. I would like to hide the last menu level on mobile (as I have 3 levels on my menu). Again be sure to reference the ET icon guide (link below) if you want to change the icons. font-family: ETmodules; I did everything as you suggested but the only thing changing was that there was a plus icon on mobile. It is mandatory to procure user consent prior to running these cookies on your website. If it still doesn’t work, possible there’s a conflict. https://hoteleldhestar.kaliber.is/. But opting out of some of these cookies may affect your browsing experience. Hope all is well in Dojo land , Your email address will not be published. Daniel, this is so helpful! Thank you so much. Can you please give a clue if Iam missing something please? The Divi changelog contains a chronologically ordered list of changes such as bug fixes, new features, and associated version numbers. But I have an Issue: after edit my menu (I change a page with another one) the collapse function doesn’t work..maybe is a jquery problem…could you help me please? I feel sorry because I really would prefer it working. See my tutorial test site here for reference: https://tutorials.joshhall.co. content: “\4d”; As a result, he loves to share his experience and knowledge of marketing, website development and graphic design with the world! Or only in the default menu? i tried everything, but it still does not work. Before: After: Alternative Method Collapse Submenus make it easier for users to navigate your website. Totally agree on having this in almost every case. Will this work for menus that have top level, submenu and sub submenu. Next, click the Use Visual Builder button to launch the builder in Visual Mode. Required fields are marked *. Hi Josh! thank your for your tutorial. Oh and you’ll also get my latest eBook! I am wondering if it’s possible for a user to tap anywhere on the menu item line to open the nested items instead of only the ‘+’ icon? 40 Divi Pricing Table Styles. Save my name, email, and website in this browser for the next time I comment. You have the CSS and JQuery in all the right spots and have cleared cache and refreshed browser?? I’ll be revising the tutorial but try this out…, Working with WordPress 5.41 and a child theme from Divi Version: 4.4.7. No coding needed. Thank you for posting this Josh! Live Builder Demo. https://divilife.com/create-fixed-mobile-menu-divi. In this tutorial I’ll show you How to Create a Mobile Menu Collapse Effect in Divi.It’s a great way to customize the Divi mobile menu on your site and is VERY important for UX (user experience) when you have a lot of menu items. In our case, we took meet-the-doctor. Also wanted know if there was a solution yet for the Theme Builder Menu Module for this? You also have the option to opt-out of these cookies. Oh, and you’ll also get my latest e-book on You can customize the color, size, etc to your liking. Click the button below to reveal a row containing some text, an image, and a video. Thank you so much for this! Integer eu magna in. Sed tempor turpis est, vel pharetra erat maximus et. So, I simply changed the color of the icon to #111 and the problem solved , Sometimes so easy and little details may not be noticed. }, /**** Here you can swap out the actual icons ****/, span.menu-closed:before { background: #86d598; /**** This removes the transparent background to a color of your choice ****/ Learn More. The first Premium pre-made layouts marketplace. By default, the first toggle on the Divi accordion is open and there is no option to make it closed. Thanks for the tutorial – it worked right away on Divi 4.4.8. dusgr June 17, 2020. Total 320+ Styles. As a result, he loves to distill his experience and knowledge in marketing, website development and graphic design to the world! Thanks for all your tips!! }, /**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/, .et_mobile_menu .menu-item-has-children { Make sure that for each button, the CSS class ID has the same number as the module, section or row you are trying to hide. No prob, David. Get 20% OFF Divi when you join using my link! Copy and paste the CSS code below into your website’s Divi Theme Customizer  > Custom CSS. If I expand another submenu it would be nice if the previous one closes. This category only includes cookies that ensures basic functionalities and security features of the website. function setup_collapsible_submenus() { Find the space labeled “ADD CODE TO THE . Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. Go to the row, section or module you would like to hide and then show when this button is clicked. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. I follow all script and its work for Divi 3.0 but not for 4.0. I have used this code for a few websites but it seems that the new menu have changed the css id or something else. Thanks to one of my developers Christian at Brightsol for helping me revamp this code. Elegant Themes releases a new Divi layout pack each week that can be loaded directly from within Divi using the Visual Builder. 1. Do you maybe know why it doesn’t work on Safari? position: relative; Daniel is the Managing Director of Get Me Marketing and a self-proclaimed guru of everything marketing. Please be sure to put CSS and JQuery in all the right spots and have cleared cache and refreshed browser! New Divi Sections Layout launched regularly. NEW CODE JOSH POSTED IN COMMENTS $(‘.et_mobile_nav_menu .menu-item-has-children > a’).each(function() { What am I missing here? Hi Josh, your info, training videos and knowledge are fantastic thank you so much for sharing. We also use third-party cookies that help us analyze and understand how you use this website. It’s working fine for me with latest version 4.0.4. RejectAccept Our Cookies. you must save after changes was applied and check it under front end. Whew!! Convert any Section on your page to an Accordion/Toggle Content with just 1-Click. I will show you two methods of how you can make the accordion closed. I was wondering how to change the button arrow to point down and up based on the content hiding or showing? Use coupon code “CSS30” for $30 OFF at checkout! It’s only work in Additional CSS; please update in your article – Keshav. Assign an ID. Divi Pixel is a powerful tool build for Divi. Tags: divi theme examples, elegant themes tutorial, gradients, section dividers, sections. Fortunately, we have come up with a solution! But: Could you please help me, how should I modify the code if I want the submenus to appear when I click on the menu item as well, not just on the “+” icon? But don’t worry, if you’re terrified of code, it’s all explained and provided below. I’m going to update this post and do a new video this week: (function($) { Now that you know about the Divi Specialty Section Layout, and a brief history of the web, you’ll be building something special. If you chose to make your section a global layout, the entire section will now be bright green. 12 Divi Den free xams layouts FREE! 20 About Us/Intro Section Style. }, span.menu-closed.menu-open:before { when i am in wordpress it looks good, but it does not work on the browser. }. That’s usually the case if you’re not seeing the CSS changes immediately. I’ll let you know when my next tutorial, podcast or post drops and promise not to bombard you with spammy emails. On this page of yours, on the mobile view, if you tap on the blog or in anywere in the line that has a + icon it shows the collapsible menu. Changes to this section can be made from the page, or from your layout library (navigate to Divi>Divi Library from the admin menu). font-size: 16px; by Josh | Jul 29, 2019 | Divi Tutorial | 69 comments. })(jQuery); /********* Mobile Menu Collapse ********/, /**** This hides the sub menu items on mobile ****/, .et_mobile_menu li ul.hide { Unfortunately, Divi’s built-in functions do not include partial content protection feature. Add your button or call to action and in the module’s settings add “#” to the button URL link. That was super helpful 🙂. In Divi, everything you build starts with a section. hi nice work here I did clear cache and refreshed browser. The past couple updates have seemed to fix a bunch of little things like that!
2020 divi collapse section