This default behavior of having the sub-menus display on hover can be changed using custom CSS and JS code.
Add the following CSS code to Divi > Theme Options > General Tab > Custom CSS:
/*Hide/Show the sub menus on click*/
.nav li.menu-item-has-children > ul,
.et-db #et-boc .et-l .nav li.menu-item-has-children > ul {
opacity: 1;
visibility: visible
}
.nav li.menu-item-has-children .dt-hide,
.et-db #et-boc .et-l .nav li.menu-item-has-children .dt-hide {
opacity: 0;
visibility: hidden;
}Add the following JS code to Divi > Theme Option > Integration tab > Header:
<scrit id="divi-show-sub-menu-on-click">
(function ($) {
function diviClickSubMenu() {
$('.nav .menu-item-has-children').each(function () {
$(this).find('a').attr('href', '#');
$(this).find('.sub-menu').addClass('dt-hide');
$(this).on('click', function (e) {
e.preventDefault();
$('.menu-item-has-children:not(.et-hover) .sub-menu')
.addClass('dt-hide')
.removeClass('dt-show');
$(this)
.find('.sub-menu')
.eq(0)
.removeClass('dt-hide')
.addClass('dt-show');
});
});
$(window).on('click', function () {
$('.menu-item-has-children:not(.et-hover) .sub-menu')
.addClass('dt-hide')
.removeClass('dt-show');
});
}
$(document).ready(function () {
diviClickSubMenu();
});
$(window).on('resize', diviClickSubMenu);
})(jQuery);
</script>