/

2 Easy Steps To Create A Collapsing Mobile Menu in Divi Theme

WRITTEN BY :
Aless Design Studio
POSTED ON :
05/10/2021
TAGS :

Table of Contents

In this post, we are going to see how to create a collapsing mobile menu in Divi Theme.

What is the case?

Most of the time when we are creating our website we make a lot of content – pages, posts, and shop pages if we are making an online store.

But when it is time to combine all of them to our menu sometimes we realize that we have a lot of subpages.

On desktop devices, our submenu items look good, but when we switch to mobile the real problem reveals. Our menu is looking too long, not user-friendly, and somehow broken. If we are managing a big website with a lot of pages our users can easily leave.

Collapsed mobile menu

Collapsing-mobile-menu-Divi - Theme

How to solve this problem?

It may seem very difficult and annoying, but solving this issue is quite easy. You need to follow these two simple steps and your mobile menu will collapse its submenu items and your menu will look absolutely professional in no time.

Step 1: Adding the jQuery code

Add the following jQuery code to you child theme or in Divi > Theme Options > Intergration > Add code to the < head > of your blog

				
					<script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
    $(document).ready(function() {
        $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children").append('<a href="#" class="mobile-toggle-icon"></a>');
        $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon, ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon').click(function(event) {
            event.preventDefault();
            $(this).parent('li').toggleClass('mobile-toggle-open');
            $(this).parent('li').find('ul.children').first().toggleClass('visible');
            $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
        });
        iconFINAL = 'P';
        $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
        $('.mobile-toggle-icon').on('mouseover', function() {
            $(this).parent().addClass('active-toggle');
        }).on('mouseout', function() {
            $(this).parent().removeClass('active-toggle');
        })
    });
});
});</script>
				
			

Step 2: Adding the CSS code

Go to Divi > Theme Options > CSS and add the following CSS code:

				
					/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #ff6f61; /* Icon color */
	background: #f1f1f1; /* Icon background color */
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 50%;
	padding: 3px;
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 600 !important; 
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}
				
			

Change the colors of the icon

At the beginning of the CSS code you will see this:

				
					color: #ff6f61; /* Icon color */
background: #f1f1f1; /* Icon background color */
				
			

Change the color as your needs and you are good to go! Of course, don’t forget to save all the changes throughout the process otherwise the code will not work!

 1,328 total views,  3 views today

Leave a Reply

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

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 1,271 total views,  2 views today

Read More »
WRITTEN BY :
Aless Design Studio
POSTED ON :
05/10/2021
TAGS :

Table of Contents

In this post, we are going to see how to create a collapsing mobile menu in Divi Theme.

What is the case?

Most of the time when we are creating our website we make a lot of content – pages, posts, and shop pages if we are making an online store.

But when it is time to combine all of them to our menu sometimes we realize that we have a lot of subpages.

On desktop devices, our submenu items look good, but when we switch to mobile the real problem reveals. Our menu is looking too long, not user-friendly, and somehow broken. If we are managing a big website with a lot of pages our users can easily leave.

Collapsed mobile menu

Collapsing-mobile-menu-Divi - Theme

How to solve this problem?

It may seem very difficult and annoying, but solving this issue is quite easy. You need to follow these two simple steps and your mobile menu will collapse its submenu items and your menu will look absolutely professional in no time.

Step 1: Adding the jQuery code

Add the following jQuery code to you child theme or in Divi > Theme Options > Intergration > Add code to the < head > of your blog

				
					<script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
    $(document).ready(function() {
        $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children").append('<a href="#" class="mobile-toggle-icon"></a>');
        $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon, ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon').click(function(event) {
            event.preventDefault();
            $(this).parent('li').toggleClass('mobile-toggle-open');
            $(this).parent('li').find('ul.children').first().toggleClass('visible');
            $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
        });
        iconFINAL = 'P';
        $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
        $('.mobile-toggle-icon').on('mouseover', function() {
            $(this).parent().addClass('active-toggle');
        }).on('mouseout', function() {
            $(this).parent().removeClass('active-toggle');
        })
    });
});
});</script>
				
			

Step 2: Adding the CSS code

Go to Divi > Theme Options > CSS and add the following CSS code:

				
					/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #ff6f61; /* Icon color */
	background: #f1f1f1; /* Icon background color */
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 50%;
	padding: 3px;
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 600 !important; 
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}
				
			

Change the colors of the icon

At the beginning of the CSS code you will see this:

				
					color: #ff6f61; /* Icon color */
background: #f1f1f1; /* Icon background color */
				
			

Change the color as your needs and you are good to go! Of course, don’t forget to save all the changes throughout the process otherwise the code will not work!

 1,329 total views,  4 views today

Leave a Reply

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

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 1,271 total views,  2 views today

Read More »