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