Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save phirebase/7958af116594291adb2e1e0c399590f8 to your computer and use it in GitHub Desktop.
Save phirebase/7958af116594291adb2e1e0c399590f8 to your computer and use it in GitHub Desktop.
A jQuery fix for the Divi Theme mobile menu that collapses all of the submenus
.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: all 1.5s 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 {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #ffffff;
position: absolute;
right: 25px;
}
.et_mobile_menu .menu-item-has-children > a:hover:after {
border-top: 7px solid #cc0000;
}
<script>
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '.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();
}, 700);
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment