Divi Mobile Menu Customation

Add the CSS Code by going to Divi > Theme Options > General > Scroll down > Custom CSS

/*Mobile Collapse*/
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after{
font-family: 'Font Awesome\ 5 Free';
content: '\f0fe';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after {
content: '\f410';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}

Add the jQuery and font awesome CDN in Theme Options > Integration > You can choose either in head or body section.

I recomend to add the CDN in thehead section and the jQUery in the body section. Though it’s also advisable to put any jquery code in the footer section if you’re running a child theme.

<script>

jQuery('a.btn-holder').click(function(e){
e.preventDefault();
var btnlink = jQuery(this).attr('href');
jQuery(btnlink).addClass("activated-blog").siblings().removeClass('active-blog activated-blog');
});
</script>
<script>
(function ($) {

function setup_collapsible_submenus() {

var FirstLevel = $('.et_mobile_menu .first-level > a');

FirstLevel.off('click').click(function () {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});

}

$(window).load(function () {
setTimeout(function () {
setup_collapsible_submenus();
}, 700);
});

})(jQuery);

</script>

Here’s the CDN if you want to use font-awesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Note: Make sure you set the font-family to Font Awesome if you want more selection of icons. Just visit fontawesome and use the search box to find a custom icon. Also, make sure you copy the Unicode because that is intended for the css.

font-family: ‘Font Awesome\ 5 Free’;
content: ‘\f0fe’;

Lastly, go to your Appearance > Menu and add the CSS Class name called second-level to all sub menu that you want to collaps. If you can’t find that field, scroll up and look for “Screen Options” and make sure the CSS Classes is check otherwise you can’t add custom class name.