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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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!
Awesome! another strike from the Divi master.
Thanks Amy! I’m pretty proud of this one 🙂
Hi! Thank you for this. I can’t get it to apply to menus marked as a mega menu. Could you please advise?
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. 🙂
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!
Hi John
Could you please share the URL of the website where the Menu is present for us to investigate further?
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?
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?
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
Hi Birgit,
Could you please share the URL of the website for me to write the code for you?
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?
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.
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. 🙂
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?
On phone sizes this would not be relevant as there would be a hamburger menu. Other than that I’m not sure.
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.
Hey Evan,
I have checked the website and I am not able to spot this issue on my end.
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!
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. 🙂
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!
Hi Nadine,
Please use this code and let me know how it goes. 🙂
Code: https://www.codepile.net/pile/jrnevwKe
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?
Hi David,
Could you please share the URL of the page where you are facing this issue so that I could investigate further?
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!
Hi Roberto,
Could you please try this code and see if that helps?
Code: https://www.codepile.net/pile/dB9daRb1
Let me know how it goes. 🙂
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!
Hi Martin,
We will analyze the script and will provide a valid solution on this very soon.
Thank you, looking forward!
$(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;
});
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?
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?
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.
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?
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
Hey Mike,
I have investigated the website and I am not able to replicate the issue on my end as everything works great.
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);
I am glad to hear that everything works fine now. 🙂
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.
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.
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
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?
Hey Frank,
Could you please share the URL of the website so that I can investigate this issue?
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?
What? The mobile menu does not show on hover…that is not an applicable question.
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
Hi Kristi
Could you please share the website URL so I can investigate the issue further?
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
Probably won’t work with the mega menu class out of the box.
Ok, do i need to change the class name?
Probably, that is outside the scope of this tutorial, so it may need to be custom coded by a developer.
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
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.
Hey Aaron,
Could you please share the URL of the page for me to investigate it further?
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.
Hey Geoff,
Could you please share the URL of the website for me to investigate the issue further?
Works a charm, Though I wonder, can you set the container of the menu to trigger on click, rather than just the text label?
It is probably possible by changing the selector, but I have not tried that.
Hello, thank you for the tutorial. It worked for our needs, but it has a glitch. Do you happen to know how to fix it. It takes a little bit of time to load clicking of the menu item, and it totally glitches. Here is a video of what happens and here is a site we are using it on. Any tricks are appreciated. https://www.loom.com/share/3971243336bc4defbd0a59e1eb67cbd5
Hi Nelson! Thank you for the tutorial. It seems that the menu has a glitch because it doesn’t always lets you click the Sub-Menu to open the sub-sub menu. I read through comment section and it has been asked as well several times, but I couldn’t figure a code to fix it.
Here is a video of the issue – when we click on the sub-menu item to open the drop down disappears. https://www.loom.com/share/3971243336bc4defbd0a59e1eb67cbd5
Our website is https://measurementjustice.org/
Thank you for your help.
Hi Anna!
The issue could happen if the script does not load properly. Please keep the Defer jQuery And jQuery Migrate option disabled and let me know if the issue happens again.
Hello,
i use menu modul in the theme builder with your code to show it as hamburger menu on Desktop. Now I would like to have exactly the opposite effect, that the hamburger menu opens via hover. Is that possible?
Regards
Wolfram
Hi Wolfram!
Can you share the URL of the page for further investigation?
I see lots of previous requests for this as well, but no response with code. How do you make the submenu close when another top-level menu item is clicked and opened?