TIPS & TRICKS, TUTORIAL

8 new style
for mobile menu of Divi

Fabio Sarcona, Web Developer, Italy

24 May 2016

One of the most common desires of each of Divi user is always to have different styles of design for the menu, especially for the navigation of the mobile.

That’s why I thought that the creation of a collection of styles to customize the Menu Mobile of Divi could be useful for all those users who want to get a new look for the menu, but they have little or no knowledge of the code.

This will not only allow you to customize the design of your mobile menu but also to have greater flexibility because styles are only applied to mobile browsing, so you can safely use the default menu for the navigation of the desktop and one of the styles of this list for mobile.

Note: I apologize in advance if my English there are some mistakes, I still have to improve. 😀

Before starting..

Before you begin to see the different styles for mobile menu, you must add the following code in your options panel.

Go Theme Options > click the Integration tab and add the following link in the box “Add code to the <head> of your blog”.

/****** Font Awesome ******/ 
	

/****** Collapsing Nested Menu Items | Code by Elegant Themes ******/  

The first code / link adds Font Awesome to your website (if you are already using the Font Awesome on your website, you do not need to add anything) while the script displays the only click submenu.

Source

Note: for each style, I added the CSS code that hides the submenu.
Now, all you have to do is choose your favorite design and add the code to your options panel or for your child theme. 🙂

1. Style Slide-In

This style allows for a floating menu with a slide-in, very similar to the slide-in menu of Divi, with the difference that this style is applied only to the mobile navigation.

menu-mobile-style-1 mobile menu divi

/************ Menu Slide-In ************/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important; 
}

.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 18px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 50px;
}

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }



@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}

.et_mobile_menu li a {
    color: #da1755 !important;
    width: 100%;
    float: left;
    text-align: left;
    border-bottom: 1px solid #ddd;
    margin: 5px;
    transition: .2s;
    text-transform: uppercase;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
}

.mobile_nav.closed #mobile_menu {
    background: rgba(51,51,51,0.9) !important;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    background: rgba(51,51,51,0.9) !important;
}

.mobile_nav.opened #mobile_menu {
    background: rgba(27,29,30,0.98) !important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: "4d";
    color: #fff !important;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and  (min-width: 481px) {
  #mobile_menu {    
    width: 320px;    
    margin-left: calc(100% - 320px);
  }
}

@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 260px;    
    margin-left: calc(100% - 260px);
  }
}

@media only screen and  (max-width: 340px) {
  #mobile_menu {    
    width: 100%;    
    margin-left: 0;
  }
}

2. Style Slide-In Gradient

This style is similar to the previous one, but as you can see, I applied a gradient background, and I pointed out the current link with a transparent background, and with the left padding. To customize the background color, you just replace the two colors within the brackets and you can decide the direction of the gradient by replacing higher with: right, left or bottom. Of course, you can get more gradient effects, but I preferred a simpler solution to also customize for beginners.

menu-mobile-style-2 mobile menu divi

/****** Menu slide-in Gradient *******/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important; 
}
.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 22px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 50px;
}

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
    padding-top: 20px;
}
.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: "4d";
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and  (min-width: 481px) {
  #mobile_menu {    
    width: 320px;    
    margin-left: calc(100% - 320px);
  }
}

@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 260px;    
    margin-left: calc(100% - 260px);
  }
}

@media only screen and  (max-width: 340px) {
  #mobile_menu {    
    width: 100%;    
    margin-left: 0;
  }
}

3. Stile Full-Width

The Full-Width style, as the name suggests, allows you to have a mobile menu that covers the entire screen. In this example, you can see the end result that you can customize in minutes.

mobile menu divi

/****** Menu Full-screen ******/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important;
 }
.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 22px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 55px;

}

/* Font Awesome */
.fa {
    margin: 10px ;
  }

@media screen and (max-width: 980px) {
  .et_header_style_centered #main-header {
    position: fixed;
  }
  .et_header_style_centered #main-header .mobile_nav {
    background-color: transparent;
  }
  .mobile_nav.closed .select_page {
    display: none;
  }
  .et-fixed-header#main-header {
    background-color: transparent !important;
  }
}
.et_mobile_menu {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9998;
  overflow: scroll !important;
  background-color: rgba(10, 10, 10, 0.9) !important;
  margin-left: -30px;
  padding: 25% 0;
  height: 100%;
  width: calc( 100% + 60px);
  border-top: none;
}
.et_mobile_menu li a {
  text-align: center;
  font-size: 1.55em;
  border: 0;
  padding: 5% 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
  color: #5376F6;
  background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
  font-size: 1.05em !important;
  margin: auto;
  padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
  color: #999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
  content: "4d";
  color: #fff;
}
span.mobile_menu_bar {
  z-index: 9999;
}

4. Style Multicolor

The Multicolor style is one of my favorites. Again customization is really very easy, all you have to do and replace colors for each element, the bottom of the code. But relax, I added a comment in the code to help you customize the colors easily.

menu-mobile-style-5 mobile menu divi

/****** Menu multicolor horizontal ******/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important; 
}
.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 22px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 100px;
}

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: center;
font-size: 1.6em;
border: 0;
padding: 8% 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.et_mobile_menu li a:nth-child(2) {
padding-top: 0% !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.1em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #da1755;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "4d";
color: #606060 !important;
top: -15px !important;
left: 27px !important;
transition: .15s;
}
span.mobile_menu_bar {
z-index: 9999;
}


/**__ The following code allows you to change the background of each individual item. All you need to do is change the hex code with the one that you prefer, and if your menu has more than 7 items, you must copy the piece of code that you see and change the number in the parenthesis in ascending order. Example: if your menu has 10 items, you will need to add more 3 snippet and change the number in the brackets with 8, 9, 10. __**/

.et_mobile_menu li:nth-child(1) {
    background-color: #F0E8DA;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #F2D3DE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #E8B5C4;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #C98392;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #83B5B1;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #B2D9CF;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #92bdcf;
}

5. Style Multicolor with Icon left and Text aligns right

As you can see is very similar to the previous style, the only customization I’ve applied, and move the icons on the left and aligned the text to the right.

menu-mobile-style-3 mobile menu divi

/****** Menu multicolor with Icon left and text align right ******/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important; 
}
.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 22px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 18px;
}

/* Font Awesome */

.fa {
    position: absolute;
    display: block;
}



@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: right;
font-size: 1.6em;
border: 0;
padding: 8% 6%;
text-transform: uppercase;
letter-spacing: 4px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.1em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #f9f9f9;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "4d";
font-size: 26px !important;
color: #333 !important;
top: -22px !important;
left: 32px !important;
transition: .15s;
}
span.mobile_menu_bar {
z-index: 9999;
}

.et_mobile_menu li:nth-child(1) {
    background-color: #42CAC6;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #4B9BCE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #4B7FB9;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #5E5493;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #5F4270;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #592877;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #066A91;
}

6. Style Windows Phone

This style is what I currently use for my website, and is inspired by the design of the new Windows Phone. A little tip for you is to use this style for websites that have few items in the menu, because with an extensive menu the visual result, but also the user experience, may not be the best.

menu-mobile-style-6 mobile menu divi

 /***** Style Windows Phone *****/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important;
 }
.et_mobile_menu .menu-item-has-children > a:after { 
	 font-family: "ETmodules";
         font-size: 15px;
         font-weight: 800;
         content: "3"; 
	 position: absolute; 
	 right:37px;

}

/* Font Awesome */
.fa {
    margin: 10px ;
  }


@media only screen and (max-width: 980px){

#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 80px !important;
}

.et_mobile_menu li a {
    color: #fff !important;
    width: 46%;
    float: left;
    text-align: center;
    background-color: #a46497 !important;
    padding: 11% 8%;
    margin: 2%;
    font-size: 1.2em;
}
.mobile_nav.closed #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    background: rgba(51,51,51,0.9) !important;
}

.mobile_nav.opened #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content: "4d";
    color: #fff;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and  (min-width: 481px) {
  #mobile_menu {    
    width: 370px;    
    margin-left: calc(100% - 370px);
  }
}

@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 320px;    
    margin-left: calc(100% - 320px);
  }
}

@media only screen and  (max-width: 340px) {
  #mobile_menu {    
    width: 100%;    
    margin-left: 0;
  }
}

7. Style slide-in with background image

I promised I would share other styles for mobile menu, and here’s this new style is added to the previous ones, and that allows you to have a menu with slide-in effect but with a background image. Let me know what you think in the comments 😉

menu-mobile-style-7 mobile menu divi

  /****** Menu slide-in with background image*******/

/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent; 
}
#main-header .et_mobile_menu li ul.sub-menu.hide { 
	display: none !important; 
	visibility: hidden !important;  
	transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible { 
	display: block !important; 
	visibility: visible !important; 
}
.et_mobile_menu .menu-item-has-children > a:after { 
	font-family: "ETmodules";
         font-size: 22px;
         font-weight: 800;
         content: "3"; 
	position: absolute; 
	right: 50px;
}

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
    padding-top: 20px;
}
.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ), /* ------ Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect  ----- */

    url("https://staging2.creativechildthemes.com/creative-tutorial/wp-content/uploads/sites/16/2016/06/view-MONTAIN.jpg"); /* ----- Add here the url of the image you want as background ----- */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ),
    url("https://staging2.creativechildthemes.com/creative-tutorial/wp-content/uploads/sites/16/2016/06/view-MONTAIN.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: "4d";
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and  (min-width: 481px) {
  #mobile_menu {    
    width: 320px;    
    margin-left: calc(100% - 320px);
  }
}

@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 260px;    
    margin-left: calc(100% - 260px);
  }
}

@media only screen and  (max-width: 340px) {
  #mobile_menu {    
    width: 100%;    
    margin-left: 0;
  }
}

8. Style Slide-In di SJ James di Divi.Space

This is a style Slide-in created by SJ James Divi.Space, a fantastic example of how it can be customized the menu mobile of Divi for a simply fantastic result. Note the animation that opens and closes the menu, really fantastic!
PS: This style is also included in the plugin Divi Switch.

side_menus mobile menu divi

 

9. Style Sleeker by James Fosker of Bolt Themes

Another style that I want to show was created by James Fosker of Bolt themes. Sleeker has a clean design and very cool, perfect for a menu with many items.

sleeker-divi-mobile-menu mobile menu divi

Conclusion

Well, now in your tool-box staff you have available 9 new styles to get a unique Divi floating menu that you can customize and use as and when you want. But before you that, I’m going to add to this list the new styles, so if you want to stay up to date you can subscribe to the newsletter and do not miss the next styles.

Join over 18000 people and get the FREE stuff!

Write your email below and get the FREE Divi layouts you can use in your website with unlimited license.

Your email is safe 💌 . I hate SPAM same as you!