Get The Plugin
Account Login

Customizing Your Divi Mobile Menu

by Mar 7, 2018Header Hacks, Menu Hacks4 comments

Personally, I think the default mobile menu on Divi is super boring. Every new Divi website I create always gets one of these custom menus.

*Credit goes to Fabio Sarcona of creativechildthemes.com for these. Unfortunately the original blog post is no longer available to refer to. I saved these before the post was gone, and customized them a little bit for better viewability and compatibility with the latest version(s) of Divi.

If you are knowledgeable with CSS then this should be really simple for you.  All you need to do is place the javascript code into the page <head> and the CSS into the Divi Theme Custom CSS Box.

You may need to do a little extra customization to fit your website’s needs, as not all logos and menus are the same.

To customize the colors, just search through the CSS for the selected element and change it’s color. If you are stuck on something, or need some help, just leave a comment below and I will try to respond as soon as possible.

①  The first thing you want to do is paste this code into the head of your website.

/****** Collapsing Nested Menu Items | Code by Elegant Themes ******/
<script>
(function($) {

function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu > .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');

if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
$(this).next('.sub-menu').addClass('hide');
}

if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).next('.sub-menu').toggleClass('visible');
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 2700);
});
})(jQuery);
</script>

This bit of javascript allows the menu items with submenu items to be collapsed by default, showing a little white arrow on the right side to indicate that there is a dropdown menu. This is helpful if you have a lot of dropdown menus. If you don’t wish to automatically hide the submenus, you can just skip this part and move on.

#main-header.et-fixed-header { 
    top:0 !important; 
}
.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
}

.fa {
    margin-right: 15px
}

@media only screen and (max-width: 980px) {
    #main-header {
        position:fixed !important;
    }
    .et_menu_container, #main-header {
        height:50px;
    }
    .admin-bar #main-header:not(.et-fixed-header) #mobile_menu {
        top:97px;
    }
    .admin-bar #main-header.et-fixed-header #mobile_menu {
        top:51px;
    }
    #mobile_menu {
        display:block!important;
        min-height: 100vh;
        height: 100%;
        right: 0;
        position: fixed;
        z-index: 9998;
        overflow: scroll;
        border-top: none;
        padding-top: 20px!important;
		padding-bottom: 70px !important;
    }

    .et_mobile_menu li a {
        color: inherit;
        width: 100%;
        float: left;
        text-align: left;
        border-bottom: 1px solid #ddd;
        margin: 5px;
        transition: .2s
    }

    .mobile_nav ul#mobile_menu .current_page_item>a {
        color: inherit!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: 95%
    }
	.mobile_menu_bar {
        padding-bottom:9px !important;
    }
    .mobile_menu_bar:before {
        color: #1b1d1e!important
    }
    div#et_mobile_nav_menu, div#et_top_search {
        margin-top: -14px;
    }
    .mobile_nav.opened .mobile_menu_bar:before {
        content: "\4d";
        color: #000!important;
        z-index: 999999
    }
}

@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
    }
}


/****** 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) {
    /* Better size header and fix to top of page */ #main-header {
        position:fixed !important;
    }

    #main-header.et-fixed-header {
        top: 0 !important;
    }

    .et_menu_container, #main-header {
        height: 50px;
    }

    .admin-bar #main-header:not(.et-fixed-header) #mobile_menu {
        top: 97px;
    }

    .admin-bar #main-header.et-fixed-header #mobile_menu {
        top: 51px;
    }

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

    .mobile_menu_bar {
        padding-bottom: 9px !important;
    }

    div#et_mobile_nav_menu, div#et_top_search {
        margin-top: -14px;
    }

    #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: 0px !important;
        padding-bottom: 70px;
    }

    .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: #2ec96e;
        background: -moz-linear-gradient(-45deg, #2ec96e 0%, #5a83ca 100%);
        background: -webkit-linear-gradient(-45deg, #2ec96e 0%,#5a83ca 100%);
        background: linear-gradient(135deg, #2ec96e 0%,#5a83ca 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: #2ec96e;
        background: -moz-linear-gradient(-45deg, #2ec96e 0%, #5a83ca 100%);
        background: -webkit-linear-gradient(-45deg, #2ec96e 0%,#5a83ca 100%);
        background: linear-gradient(135deg, #2ec96e 0%,#5a83ca 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;
    }

    .mobile_menu_bar:before {
        color: #1b1d1e !important;
    }

    .mobile_nav.opened .mobile_menu_bar:before {
        content: "\4d";
        color: #000 !important;
        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;
    }


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

/* Better size header and fix to top of page */ 

#main-header {
    position: fixed!important
}

#main-header.et-fixed-header {
    top: 0!important
}

.et_menu_container,#main-header {
    height: 50px
}

.admin-bar #main-header:not(.et-fixed-header) #mobile_menu {
    top: 97px
}

.admin-bar #main-header.et-fixed-header #mobile_menu {
    top: 50px
}

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

.mobile_menu_bar {
    padding-bottom: 9px!important
}

div#et_mobile_nav_menu,div#et_top_search {
    margin-top: -14px
}

.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
}

#main-header .et_mobile_menu li ul, .et_pb_fullwidth_menu .et_mobile_menu li ul {
    padding-left: 0px;
}

.et_mobile_menu li li {
    padding-left: 0px;
}

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

.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_mobile_menu {
    top: 50px;
    left: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll!important;
    background-color: rgba(10,10,10,0.9)!important;
    margin-left: -30px;
    padding: 0px;
    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;
    color:#fff;
}

.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: #000
}

span.mobile_menu_bar {
    z-index: 9999
}



/****** 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){
    /* Better size header and fix to top of page */ #main-header {
position:fixed !important;
}

#main-header.et-fixed-header {
top: 0 !important;
}

.et_menu_container, #main-header {
height: 50px;
}

.admin-bar #main-header:not(.et-fixed-header) #mobile_menu {
top: 97px;
}

.admin-bar #main-header.et-fixed-header #mobile_menu {
top: 50px;
}

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

.mobile_menu_bar {
padding-bottom: 9px !important;
}

div#et_mobile_nav_menu, div#et_top_search {
margin-top: -14px;
}

#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 50px;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 0px !important;
    padding-bottom:70px;
}
.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://picsum.photos/800/1200?image=10&blur"); /* ----- 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://picsum.photos/800/1200?image=10&blur");
    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: 95%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
    color: #000 !important;
    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;
  }
}

4 Comments

  1. Scott Muff
    Scott Muff on November 14, 2018 at 1:20 pm

    Hi there! This is excellent. I was able to get the new menu into the site (http://scottm.sgedu.site/qps/) but my issue is that the top level menu items: Services, Therapeutic Areas, Resources, News, About, Locations, and Careers are links to individual pages when the site is full size but when the size is small and using the hamburger menu they are only able to reveal the sub menus and not link to those individual pages. I’m not sure how to fix this. Thoughts?

    Reply
  3. Gabriela
    Gabriela on May 15, 2019 at 5:17 am

    Hi Charlie
    Thanks for your great post/work.
    I was searching this menu option so hard.
    My only issue is the line-height at the mobile landscape mode. It is way to much (it’s only showing three items), so that the clients need to scroll down to see the other items.

    Reply
  4. Gabriel
    Gabriel on July 26, 2019 at 7:05 pm

    bro, how about the search button… Can we change its location?

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.