Mobile Menu Customization

The mobile menu is probably one of the weakest points of the Divi Theme with very few customization options, but there is a lot we can achieve with CSS, and that is what I’d like to show you in this video.

Video Chapters

CSS code used:

/* Default Navigation */

@media (max-width:980px) {
	
	.opened .mobile_menu_bar:before {
		content:'\4d';
	}
	
	.et_mobile_menu {
		border-top:none;
		width:100vw;
		left:-10vw;
	}
	
	.et_mobile_menu li a {
		border-bottom:none;
		font-weight:400;
	}
	
	.et_mobile_menu .menu-item-has-children > a {
		background:none;
		font-weight:400;
	}
	
	li.cta-link a {
		background:lightsalmon;
		color:#fff;
		display:inline-block;
		margin-left:5%;
		margin-top:10px;
		text-transform: uppercase;
		font-weight:700;
		letter-spacing: 1px;
		border-radius:4px;
	}
	
	/* Modified CSS fot the Slide-in animation */
	.et_mobile_menu {
		border-top:none;
		display:block!important;
		width:100vw;
		left:auto;
		position: fixed;
		right:-100%;
		padding:80px 5% 5%!important;
		height:100vh!important;
		transition: all 1s ease-in-out;
		top:0;
		z-index:-1;
	}
	
	.opened .et_mobile_menu {
		right:0;
	}
	
}


/* Menu Module */

@media (max-width:980px) {
	
	.dsa-menu .opened .mobile_menu_bar:before {
		content:'\4d';
	}
	
	.dsa-menu .et_mobile_menu li a {
		border-bottom:none;
		font-weight:400;
	}
	
	.dsa-menu .et_mobile_menu .menu-item-has-children > a {
		background:none;
		font-weight:400;
	}
	
	.dsa-menu li.cta-link a {
		background:lightsalmon;
		color:#fff;
		display:inline-block;
		margin-left:5%;
		margin-top:10px;
		text-transform: uppercase;
		font-weight:700;
		letter-spacing: 1px;
		border-radius:4px;
	}
	
	.dsa-menu .et_mobile_menu {
		border-top:none;
		display:block!important;
		width:100vw;
		left:auto;
		position: fixed;
		right:-100%;
		padding:80px 5% 5%!important;
		height:100vh!important;
		transition: all 1s ease-in-out;
		top:0;
		z-index:-1;
	}
	
	.dsa-menu .opened .et_mobile_menu {
		right:0;
	}
	
}