1. CREATE A WHITE SQUARE BEHIND YOUR MOBILE NAV WITH 5PX PADDING:
Copy this CSS code into your Child Theme Style Sheet or Divi e-Panel CSS

 /*White square background */

/*----This creates a white box around mobile menu button---*/
.mobile_menu_bar:before {
background-color: #fff!important ; 
padding: 5px 5px 5px 5px ;
} 

2. TILT YOUR MOBILE NAV USING CSS

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. To get the same effect as the image above, make sure you complete Edit 1.

 
/*---THIS TILTS THE MOBILE MENU NAV -90 DEG----*/
.mobile_menu_bar:before {
 position: relative;
 top: 0;
 left: 0;
 font-size: 32px;
 content: "\61";
 cursor: pointer;
 display:block; /*---This rotates the mobile nav box---*/
 -webkit-transform: rotate(-90deg); 
 -moz-transform: rotate(-90deg); 
}
 

3. ADD A RED BACKGROUND

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. THE SECOND PART OF THIS CSS  changes your 3 Hamburger lines to white. You can change this to any colour you like!

 
/*--MAKE THE MOBILE MENU NAV BACKGROUND BLOCK RED */

/*----This creates a red box around mobile menu button---*/
.mobile_menu_bar:before {
background-color: #E02B20!important ; 
padding: 5px 5px 5px 5px ;
}

/*--CHANGE THE COLOUR OF THE 3 HAMBURGER LINES--*/
/*--This makes the 3 hamburger lines white--*/

span.mobile_menu_bar:before {
 color: white !important;
}
 

Divi WordPress Theme

4. TEAR-DROP MOBILE NAV

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. Enjoy!

 
/*---TEAR DROP MOBILE MENU BACKGROUND---*/
/*----This creates a white box around mobile menu button---*/

.mobile_menu_bar:before {
background-color: #fff!important ; 
padding: 5px 5px 5px 5px ;
border-top-left-radius: 0.7em; /*change these to change roundness*/
border-top-right-radius: 0.7em;
border-bottom-right-radius: 0.7em;
}
 

5. CIRCLE MOBILE NAV

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. Enjoy!

 
/*---MAKES A ROUND MOBILE NAV BACKGROUND BUTTON---*/
/*----This creates a white box around mobile menu button---*/
.mobile_menu_bar:before {
background-color: #fff!important ; 
padding: 5px 5px 5px 5px ;
border-top-left-radius: 0.7em; 
border-top-right-radius: 0.7em;
border-bottom-right-radius: 0.7em;
border-bottom-left-radius: 0.7em;
}
 

6. CHANGE THE ICON INSIDE YOUR MOBILE NAV

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. By simply changing the number in the content part of this code , you can change the icon – Enjoy!

 
/*---EASY WAY TO CHANGE THE ICON INSIDE THE MOBILE MENU BLOCK---*/
.mobile_menu_bar:before {
 position: relative;
 top: 0;
 left: 0;
 font-size: 32px;
 content: "\37"; /*--JUST CHANGE THIS NUMBER TO 35,36,37,38...---*/
 cursor: pointer;
}
 

7. ADD A MENU TEXT ABOVE YOUR MOBILE NAV

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. By simply changing the text in the content part of this code , you can change the text above your Mobile Nav – Enjoy!

 
/*---ADD THE WORD MENU ABOVE THE MOBILE MENU NAV BLOCK--*/
.mobile_nav::before { content:'Menu'; 
vertical-align:top; 
line-height:2.2em; 
color: #fff ; 
}
 

8. BONUS – HOW TO CHANGE THE MOBILE SUB-MENU BACKGROUND

Copy this CSS code into your Divi Child Theme’s CSS Style Sheet or in the Divi Theme’s CSS box. This changes the drop down menu background to a transparent black, but you can change the colour and opacity to anything you like. Enjoy!

 
/*---MENU DROPDOWN BACKGROUND EDIT---*/
/* ---This creates a black opacity on the background of the mobile dropdown menu---*/
.et_mobile_menu {
 background-color: rgba(0, 0, 0, 0.5)!important;
}
 

Bloom Email Optin Plugin

Pin It on Pinterest