Customize Divi Mobile Menu

One cool feature with Divi is the global css. You can create a really cool look with the menu on mobile devices by using the code below. You can change the tile color within the code and of course change the menu background color from within the full width navigation module. The images below is my favorite one, but there are 8 different styles you can check out HERE.

If you have nested child pages in your menu you can follow this hack to collapse them on the mobile menu by going to the Elegant themes blog HERE.

The text MENU is the first part of the code below. I have mine set to after as you see below, but you can always put before, depending on the look you like.

This look allows for a lot of screen real estate to show off the logo, announcements and other end user interactive features.

Click to access the CSS Code

.mobile_nav::after { content:’Menu’; vertical-align:top; line-height:2.2em; }

/***** 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: 6px ;
}
@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: #93B347 !important;
padding: 15% 4%;
margin: 1%;
font-size: 1.1em;
}
.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;
}
}

Next Post
Previous Post