Module 5 - Lesson 9

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

00:00 Introduction

00:35 Changing the Hamburger Icon

02:59 Fullwidth Menu

06:22 Adding Call To Action Button

08:59 Slide In Animation

14:21 Customizing Menu Module

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;
	}
	
}

Join the discussion

Share your thoughts about this lesson with fellow students!

Login to your Account

If you're a DSA Student, please log in to your account to access the course content.

Sorry, you don't have access to this content.

It looks like you're not enrolled in Divi Stylist Academy.