Divi mobile menu: collapse nested menu items

Written by

Collapse Divi mobile menu

If you have a Divi-powered website with a large menu, contained nested menu items, you can face with the following issue for the mobile and tablet views: the nested menu expands, holds the whole screen and some menu elements can be hidden.

Large mobile Divi menu with a lot of nested menu items

There is a hack to make the mobile menu look more compact and collapse the nested items.

Solution: Mobile Divi menu with collapsed nested menu items
  1. Copy-past the following css-code to your style.css or to the place where you hold your style sheets (you can also put the code here instead: Divi Theme Options -> Integrations -> Add code to the body)
  2. #main-header .et_mobile_menu .menu-item-has-children > a {
    	background-color: transparent; 
    	position: relative; 
    }
    #main-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;
    }
    #main-header .et_mobile_menu .menu-item-has-children > a:after {
    	font-size: 16px; 
    	content: '\4c'; 
    	top: 13px; 
    	right: 10px;
    }
    #main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    	content: '\4d';
    }
    #main-header .et_mobile_menu ul.sub-menu {
    	display: none !important;
    	visibility: hidden !important;  
    	transition: all 1.5s ease-in-out;
    }
    #main-header .et_mobile_menu .visible > ul.sub-menu {
    	display: block !important;	
    	visibility: visible !important;
    }
    
  3. Copy-past the following php-code to the functions.php (you can also put the code here instead after the inserted css-code: Divi Theme Options -> Integrations -> Add code to the body)
	function mobile_menu_colapse_nested_levels(){
	?>
		<script type="text/javascript">
		(function($) { 
			function setup_collapsible_submenus() {
				var $menu = $('#mobile_menu'),
					top_level_link = '#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);
		</script>
	<?php
	}
	add_action('after_body', 'mobile_menu_colapse_nested_levels');

That’s all! Enjoy!

Leave a Reply

Your email address will not be published.