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!

52

Last updated Aug 31, 2021 @ 11:11 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

57 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
      • Evan

        I can’t get the menu to work on touchscreens either. This is an issue since many people have laptops with touchscreens and if you hold a tablet sideways, it becomes the desktop view. Please let me know if you have a solution to this issue.

      • Hemant Gaba

        Hey Evan,

        I have checked the website and I am not able to spot this issue on my end.

  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
      • Nadine

        Hi

        I have the same problem as Steve.
        I have added the additional code, but it still doesn’t work with the mega menu.

        Example: https://lst.famoweb.cyon.site
        (menu item «Miete»)

        Would really appreciate your feedback!

  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
  11. Martin

    Is there any way to close the current opened menu when the user click on an other menu or the browser window to close the current opened submenu? This is not working in my case. Thank you so much!

    Reply
    • Hemant Gaba

      Hi Martin,

      We will analyze the script and will provide a valid solution on this very soon.

      Reply
      • Martin Heidler

        Thank you, looking forward!

    • ace

      $(top_level_link).not($(this)).next(‘.sub-menu’).removeClass(‘visible’);

      add the above line to the on click function:

      $(this).on(‘click’, function(event) {
      event.stopPropagation();
      $(this).next(‘.sub-menu’).toggleClass(‘visible’);
      $(top_level_link).not($(this)).next(‘.sub-menu’).removeClass(‘visible’);
      return false;
      });

      Reply
  12. Melle

    Hey Nelson,
    Amazing tutorial! The only problem for me is that this isn’t working on an iPad.
    On the iPad I click the menu item but nothing happens then.
    Do you know how this could be fixed?

    Reply
    • Hemant Gaba

      Hey Melle,

      I am afraid I am not able to replicate the issue on my end. Could you please share the URL of the page for me to investigate further?

      Reply
  13. Ryan

    Hi there,

    This snippet is great ! I am having a slight issue though ; When the document first loads in, when opening up the sub-menu, it snaps closed again. Once I try to open it once, it works fine every time after that. If I comment out the ‘removeClass’ lines, the code works fine (other than not closing when I click out of the menu). Have you seen anything like this ? The removeClass lines are commented out for the time being.

    Reply
    • Hemant Gaba

      Hi Ryan,

      Everything looks fine on the URL for now. Could you please uncomment the code and let me know so that I can check where the issue is actually present?

      Reply
  14. MIKE CHATELAIN

    Hi Nelson or Hemant,

    Elegant Themes support gave me a link to this tutorial to help me change my menu from a hover dropdown to a click menu. Thanks for creating this solution and for the excellent instructions!

    Unfortunately, I tried all three versions with my Mega Menu without success. My website is https://tipsforsuccess.org

    1. The JQuery and CSS snippets in the tutorial above = no change to the dropdown on hover

    2. The JQuery and CSS snippets at https://www.codepile.net/pile/jrnevwKe = no change to the dropdown on hover

    3. The JQuery and CSS snippets at https://www.codepile.net/pile/WZRvPBZO = made the menu behavior act strangely. The last menu item still dropped down on hover (not good), but the first four menu items required a click to drop down (which is good), but then it started to flash or would not go away when I clicked it again or clicked away from the menu.

    I removed the first set of snippets before trying the next set of snippets. I have removed them again so the menu is back to where I began.

    Any other ideas?

    Thanks again,

    Mike

    Reply
    • Hemant Gaba

      Hey Mike,

      I have investigated the website and I am not able to replicate the issue on my end as everything works great.

      Reply
  15. MIKE CHATELAIN

    Elegant Themes support gave me these code snippets that worked for me. No need to reply to the Comment I submitted yesterday. Thanks anyway.

    Custom CSS:

    #et-top-navigation #top-menu li.et-hover ul.sub-menu {
    display: none !important;
    }
    #et-top-navigation #top-menu li.show-submenu ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1!important;
    }

    jQuery:

    (function($) {
    $(document).ready(function() {

    $(‘#top-menu li.menu-item-has-children > a’).click(function(e) {
    e.preventDefault();
    $(this).parent().toggleClass(‘show-submenu’);
    });

    });
    })(jQuery);

    Reply
    • Hemant Gaba

      I am glad to hear that everything works fine now. 🙂

      Reply
  16. Evan

    Hey, I was wondering if there is a way to change any of the stylings now that the menu opens with a click. For example, change the icon or underline the text once it is clicked like a button.

    Reply
    • Hemant Gaba

      Hey Evan,

      Please use this code to change the color of the icon when the submenu is opened:

      .et_pb_menu .et_mobile_menu span.menu-closed.menu-open:before{
      color: red;
      }

      Let me know how it goes.

      Reply
  17. frank

    Hi Hemant,

    I am struggling with your script on mobile devices. I goes fine on desktop but when I use it on mobile it shows the main menu page no matter what submenu item I click. Can you help out? I can share the link but not public.

    thanks,

    Frank

    Reply
  18. frank

    Hi,

    I am trying to get your script to work. It goes fine on desktop but on mobile devices the submenu now only shows the main page and not the content of a submenu page, no matter what submenu link I click. Can you help me out?

    Reply
    • Hemant Gaba

      Hey Frank,

      Could you please share the URL of the website so that I can investigate this issue?

      Reply
  19. Moh

    I appreciate your help, like the last comments, I have the issues with the Mobile menu. I there any updates on it for mobile screens?

    Reply
  20. Kristi

    Hi Nelson! Is there a way to have the submenu of one main menu drop down item close, when you click another main menu link?

    Also, is there any special code to make this work on my mega menu as well? I only have the mega menu set up when you hover over ‘Instruments’

    Thanks for your great tutorials!
    Kristi

    Reply
    • Hemant Gaba

      Hi Kristi

      Could you please share the website URL so I can investigate the issue further?

      Reply
  21. Luke

    None of the scripts with css are working for me. I have a mega menu and I am experiencing no difference at all or i am getting no sub-menus at all

    Reply
  22. dumur

    Bonjour, ce code ne fonctionne pas j’ai toujours l’effet de survol sur les menus et impossible de faire un lien avec les sous menus

    Reply
  23. Aaron

    Amazing, thank you. Just wondering however, once you click and the submenu appears is there a way to collapse the submenu when you start to scroll up or down the page, as well as clicking outside the area. Many thanks in advance.

    Reply
    • Hemant Gaba

      Hey Aaron,

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

      Reply
  24. Geoff

    Is there a short fix in javascript so that the sub menu only opens when clicking the icon and not the whole link? For example ‘Home’ is top level and a link in its own right. However, currently with your excellent piece of coding, clicking home just opens the sub menu.

    Reply
    • Hemant Gaba

      Hey Geoff,

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

      Reply
  25. Joel

    Works a charm, Though I wonder, can you set the container of the menu to trigger on click, rather than just the text label?

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart