Divi Mobile Solutions

Customize Divi Mobile Menu

Written by Divi Mobile Team

On July 4, 2016

Customize Divi Mobile Menu

I do want to start off with saying, you will want to edit some of the CSS code to match the colors you want, so a little bit of CSS knowledge would be helpful for sure. 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.

Another cool thing with the most recent version of divi is the Theme Builder.  You can go into the edit header / options / advanced and place the CSS there also.

Keep in mind some of the colors and other CSS choices can be done within the module Dropdown menu settings.

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.

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

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

You May Also Like…

How to Control the Divi Mobile Menu Top Border

How to Control the Divi Mobile Menu Top Border

Adding some color or flare to your divi mobile menu is a nice idea, but what if want to control it on a page by page basis? Yes it is possible with a little bit of CSS. You may even want the whole top border to be gone and not used at all. The CSS is listed below. You...

How To Add Text Above or Below the Mobile Hamburger Menu

How To Add Text Above or Below the Mobile Hamburger Menu

Adding some text below or above the mobile hamburger menu on Divi is really easy to add and edit to your liking.  With the code below simply add it to your Divi / Theme Options / Global CSS and you are done. You can change  the word MENU to anything you like, change...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *