{"id":137,"date":"2020-04-30T11:04:53","date_gmt":"2020-04-30T11:04:53","guid":{"rendered":"https:\/\/codexcoach.com\/?p=38"},"modified":"2022-12-05T11:16:31","modified_gmt":"2022-12-05T11:16:31","slug":"mobile-menu-collapse-effect-divi","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/mobile-menu-collapse-effect-divi\/","title":{"rendered":"How to collapse Mobile menu Divi?"},"content":{"rendered":"\n

I hope you found this guide on generating a custom shortcode for your WordPress website useful. If so, I invite you to subscribe to Elegant Themes, since we have some fantastic stuff on the way.<\/p>\n\n\n\n

Also, I remind you to back up any files before editing them.<\/p>\n\n\n\n

To summarize, we will utilize CSS and jQuery to do this. But don’t worry if you’re afraid of programming; everything is explained and supplied below.<\/p>\n\n\n\n

In summary, the CSS below styles the real mobile expand\/collapse icons, while jQuery handles the actual expand\/collapse function.<\/p>\n\n\n\n

How do I use code?<\/h2>\n\n\n\n

Right now, Divi is not providing a collapsing effect for the mobile menu. So when we have many items, it’s hard to manage the menu on mobile. It\u2019s a great way to customize the Divi mobile menu using CSS and jQuery. You have to put the following code in your CSS and JS files.<\/p>\n\n\n\n

Put the following wp_footer action in the Function.php file.<\/em><\/strong><\/p>\n\n\n\n

<?php\nadd_action( 'wp_footer', 'cxc_add_mobile_menu_collapse_script' );\nfunction cxc_add_mobile_menu_collapse_script(){\n\t?>\n\t<script type="text\/javascript">\n\t\t(function($) { \n\t\t\tfunction wc_mobile_collaps_menu() {\n        \t\t\/\/ mobile menu\n        \t\t$('#mobile_menu .menu-item-has-children > a').after('<span class="menu-closed"><\/span>');\n        \t\t$('#mobile_menu .menu-item-has-children > a').each(function() {\n        \t\t\t$(this).next().next('.sub-menu').toggleClass('hide',1000);\n        \t\t});\n        \t\t$('#mobile_menu .menu-item-has-children > a + span').on('click', function(event) {\n        \t\t\tevent.preventDefault();\n        \t\t\t$(this).toggleClass('menu-open');\n        \t\t\t$(this).next('.sub-menu').toggleClass('hide',1000);\n        \t\t});\n        \t}\n\n        \t$(window).load(function() {\n        \t\tsetTimeout(function() {\n        \t\t\twc_mobile_collaps_menu();\n        \t\t}, 700);\n        \t});\n\n        })(jQuery);\n    <\/script>\n    <?php\n}\n?><\/code><\/pre><\/div>\n\n\n\n
And put this wp_head on any CSS file.<\/em><\/strong><\/p>\n\n\n\n
<?php\nadd_action( 'wp_head', 'cxc_add_mobile_menu_collapse_style' );\nfunction cxc_add_mobile_menu_collapse_style(){\n\t?>\n\t<style>\n\t\t\/* Divi Mobile Menu Collapse CSS Start *\/\n\n\t\t\/* hide sub menu on mobile *\/\n\t\t#main-header .et_mobile_menu li ul.hide {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t\/* This for parent menu item *\/\n\t\t#mobile_menu .menu-item-has-children {\n\t\t\tposition: relative;\n\t\t}\n\t\t#mobile_menu .menu-item-has-children > a {\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t\/* For set icon on right side of parent menu *\/\n\t\t#mobile_menu .menu-item-has-children > a + span {\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tpadding: 10px 20px;\n\t\t\tfont-size: 20px;\n\t\t\tfont-weight: 700;\n\t\t\tcursor: pointer;\n\t\t\tz-index: 3;\n\t\t}\n\n\t\t\/* For icon swap *\/\n\t\tspan.menu-closed:before {\n\t\t\tcontent: "\\4c";\n\t\t\tdisplay: block;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: 16px;\n\t\t\tfont-family: ETmodules;\n\t\t}\n\t\tspan.menu-closed.menu-open:before {\n\t\t\tcontent: "\\4d";\n\t\t}\n\t<\/style>\t\n\t<?php\n}\n?><\/code><\/pre><\/div>\n\n\n\n
I hope you’ve learned How To Collapse Divi Mobile Menu. Please leave your comments in the section below. If you find this sort of post useful, please subscribe since we have a tonne of tutorials in the works that will be uploaded soon!<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
I hope you found this guide on generating a custom shortcode for your WordPress website useful. If so, I invite you to subscribe to Elegant Themes, since we have some fantastic stuff on the way. Also, I remind you to back up any files before editing them. To summarize, we will utilize CSS and jQuery […]<\/p>\n","protected":false},"author":1,"featured_media":1527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[10,7],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/137"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":3,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/137\/revisions\/1480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/1527"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}