Change The Divi Menu Submenu Open Trigger From Hover To Click
By default, submenus in Divi open by hovering your mouse cursor over the parent menu item. This is fine, but there are times when it would be better or just preferred to open the submenu with a click instead. This is a popular request and we thought this was a great idea. So today I will show you how to open a Divi menu submenu dropdown by clicking the parent menu item instead of just hovering over it. This tutorial is best used along with some of our other Divi Menu Tutorials to get a well rounded beautiful Divi mobile menu.
▶️ Please watch the video above to get all the exciting details! 👆
1. Add Some jQuery To Open The Divi Menu Submenu On Click Instead Of Hover
Since the default Divi menu behavior is hard coded into the theme to open by hover, we need to modify the code in order to make it do what we want. The best way to do this is with some jQuery and CSS, both of which work together and both are needed to make it work. I’ll show you how to add both snippets of code to your website, and show you an example of this working live in the video both with the default menu and with the Divi menu module.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
(function($) {
function setup_collapsible_submenus() {
var $menu = $('nav > ul.nav'),
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) {
event.stopPropagation();
$(this).next('.sub-menu').toggleClass('visible');
return false;
});
}
$(window).click(function() {
//Hide the menus if visible
$('.sub-menu').removeClass('visible');
});
});
}
$(window).on('load', function () {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>2. Add Some CSS To Show Or Hide The Divi Menu Submenu On Click
The second step is to add some CSS code to correspond to the visibility states that are introduced in the jQuery snippet. Both snippets are required to work together to make the Divi menu submenu open on mouse click instead of by mouse hover.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*change the visibility of the menu submenu on click*/
.nav li.et-touch-hover>ul,
.nav li:hover>ul {
opacity: 0;
visibility: hidden;
}
ul.sub-menu.hide.visible {
opacity: 1;
visibility: visible;
}Now you can go test this out, and enjoy! Be sure to watch the video to see this in action, since images can’t really show this well.
Related Tutorials To Help With The Divi Mobile Menu
In our video and tutorial, we are using some code to help the mobile menu look better. This all comes from our Divi Menu tutorial series! I recommend checking out those other tutorials for lots of helpful and fun stuff!
Hi there,
The code works perfectly fine on my end. Could you please remove the code that you have placed from this guide and share the URL of the page for me to investigate or improvise the code according to your Menu?