Code by Day | Explore By Weekend

How To Open A Divi Menu Submenu By Clicking Instead Of Just Hovering Tutorial by Pee Aye Creative

How To Open A Divi Menu Submenu By Clicking Instead Of Just Hovering

In this tutorial I will show you how to open a Divi menu submenu dropdown by clicking it instead of just hovering over it!

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<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).load(function() {
			setTimeout(function() {
				setup_collapsible_submenus();
			}, 700);
		});
	})(jQuery); 
</script>

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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!

32
Last updated Jan 3, 2021 @ 12:45 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Amy Brown
14 days ago

Awesome! another strike from the Divi master.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart