[Resolved] Submenu toggle setup on small devices

[Zuzana]

Hello!

On this website: https://claimscollection.eu/ I am trying to do the following with the main menu:

I would need that on the small devices after clicking on the menu item which has a submenu, the user is not linked to the actual page but the submenu is opening instead as a toggle. The website has 3 items with submenus on the Slovak language version and 3 items with submenus on the English version.

I was trying to do the following but it does not seem to work:

if (window.matchMedia("(max-width: 1050px)").matches) {
  document.querySelector('#menu-item-278 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-278 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);
	
  document.querySelector('#menu-item-289 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-289 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);
	
  document.querySelector('#menu-item-856 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-856 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-852 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-852 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-819 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-819 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-848 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-848 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

} else {
  
}

Do you have some idea on how to solve this issue, please?

[Tom]

Hi there,

You can do this by giving the parent menu item a URL of #.

Do you need the parent items to have a real URL on desktop?

Let me know 🙂

[Zuzana]

Hello,

thank you for your answer. 🙂 Yes, unfortunately, I would need a real URL on the desktop.

Zuzana

[Tom]

In that case, you’ll want to create a menu for mobile only: https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

Then you’ll be able to add the parent menu items as Custom Links, and set their URLs as #.

Let me know if you need more info 🙂

[Zuzana]

This solution worked! Thank you very much for your help and have a great day! 🙂

Zuzana

[Tom]

Awesome! Thanks, you too 🙂

[Author]

Posts