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!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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).on('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!

48
Last updated Aug 31, 2021 @ 11:11 am

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

21 Comments

  1. Amy Brown

    Awesome! another strike from the Divi master.

    Reply
  2. Usman Haroon

    Hi! Thank you for this. I can’t get it to apply to menus marked as a mega menu. Could you please advise?

    Reply
    • Hemant Gaba

      Could you please elaborate on the issue that you are facing with your Mega Menu for better clarity?
      Also, it will be great if you share the URL of the page where the issue is happening. 🙂

      Reply
  3. John

    Is there any way to close the current opened submenu when the user close that menu itself again? So far, your codes only work when the user either click on the other submenu or the browser window to close the current opened submenu. Would really appreciate your feedback!

    Reply
    • Hemant Gaba

      Hi John

      Could you please share the URL of the website where the Menu is present for us to investigate further?

      Reply
  4. Tobias

    Hi Nelson, I´m sorry, it´s not working for me 🙁
    The main menu still drops down on hovering.
    https://lichtblicke2.topu.biz/
    It is Divi Version: 4.9.4
    Does it depend on the Divi version?

    Reply
    • Hemant Gaba

      I am afraid that I am not able to see the submenu dropdown on hover. Could you please tell us if the problem is resolved or not?

      Reply
    • Birgit

      Hello and thank you for the code!
      I did it this way on a client website. Is there any way that the submenu only opens when you click the icon (down arrow) next to the menu label, not the menu label itself? Because actually the menu label leads to its own page, but now it is not selectable, because when clicked of course the submenu opens.
      Also, is there any way to have the opening submenu close after a few seconds if the user doesn’t select anything or open another submenu?
      I would be happy to email the URL. Please contact me if you want me to pay a previously discussed price for your help regarding the code; I don’t take the support for granted! Many thanks in advance! Birgit

      Reply
      • Hemant Gaba

        Hi Birgit,

        Could you please share the URL of the website for me to write the code for you?

  5. Hemant Gaba

    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?

    Reply
  6. Tom Pasquini

    How would you update the JS so when a visitor click on a top level navigation , if there was another sub-menu open it will close? this way only a single menu item is open at a time.

    Reply
    • Hemant Gaba

      Hi Tom,

      Could you please share the URL of the website for me to investigate further?

      Please make sure to remove the jQuery code that you pasted from the guide before sharing the URL. 🙂

      Reply
  7. Sidi

    Hello,

    Thank you very much for this tutorial. It works for me on normal desktops very well.
    Unfortunately, it is not compatible with touchscreens. Is there a way where it works for both, i.e. onclick and ontouch?

    Reply
  8. Steve

    Awesome tutorial, unfortunately it doesn’t work on Divi’s standard mega menu.

    Example: https://staging2.hilltops.webrenovatorsite.com/

    It would be wonderful if you have a fix for this please?

    (yes I know it’s the ugliest site in the world, the clients style guide is horrific)

    Thanks so much for your contribution to the Divi community!

    Reply
    • Hemant Gaba

      Hi Steve,

      I wrote the code for you and you can access the code and instructions by going to the URL below:
      Code: https://www.codepile.net/pile/WZRvPBZO

      Please let us know if that helps. 🙂

      Reply
  9. david

    hello, thanks for this helpful site. When i use these codes in conjunction with your expanding mobile menu codes the mobile menu no longer expands sub menu items. can i make this target desktop only?

    Reply
    • Hemant Gaba

      Hi David,

      Could you please share the URL of the page where you are facing this issue so that I could investigate further?

      Reply
  10. ROBERTO

    Is there any way to close the current opened submenu when the user close that menu itself again? So far, your codes only work when the user either click on the other submenu or the browser window to close the current opened submenu. Would really appreciate your feedback!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

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

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart