Divi mobile menu: collapse nested menu items

Written by 21.06.2019

Collapse Divi mobile menu

If you have a Divi-powered WordPress 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 Divi mobile menu look more compact and collapse the nested items.

Solution: Divi mobile 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() {
					if ( $(this).is(top_level_link) ) {
						$(this).attr('href', '#');
					if ( ! $(this).siblings('.sub-menu').length ) {
						$(this).on('click', function(event) {
					} else {
						$(this).on('click', function(event) {
			$(window).load(function() {
				setTimeout(function() {
				}, 700);
	add_action('after_body', 'mobile_menu_colapse_nested_levels');

FYI: here is the official video from the Elegant Themes (Divi developer) about mobile collapsing nested menus.

That’s all! Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *