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