Menu Issues on Mobile

Technical Q&A
1

We’ve recently launched a new Shopify site www.mhdirect.com.au.

Having trouble with the menu button not working correctly on mobile.

Anyone able to offer advise or a solution to fix?

2

Hey @MHDirect

There’s a Javascript issue in your theme files which is causing that error as you can in the attached screenshot below.

image

Of course, it can’t be solved without having the collaborator access of your store so feel free to share your collaborator request code in my private message and I’ll get that sorted out for you.

Cheers,
Moeed

3

This code in your theme is modified to open drop-downs on hover for desktop, however, whoever did that did not consider that on mobile, some browsers emit “mouseover” before “click”.

So “mouseover” event opens the menu, but then the “click” event actually closes it :wink:

vs

document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
  summary.setAttribute('role', 'button');
  summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open'));

  if (summary.nextElementSibling.getAttribute('id')) {
    summary.setAttribute('aria-controls', summary.nextElementSibling.id);
  }

  summary.addEventListener('click', (event) => {
    event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
  });
// Add this code make menu appears on hover
 summary.addEventListener('mouseover', (event) => {
  const menuDetails = event.currentTarget.closest('details');
  const menuListContainer = menuDetails.closest('ul')
  event.currentTarget.setAttribute('aria-expanded', 'true');
  menuDetails.setAttribute('open', 'true');
  menuListContainer.addEventListener('mouseleave', () => {
   menuDetails.removeAttribute('open');
   summary.setAttribute('aria-expanded', 'false');
  });
  menuDetails.addEventListener("mouseleave", () => {
   menuDetails.removeAttribute("open");
   summary.setAttribute('aria-expanded', 'false');
  });
 });
  if (summary.closest('header-drawer, menu-drawer')) return;
  summary.parentElement.addEventListener('keyup', onKeyUpEscape);
});

I’d try moving these lines:

  if (summary.closest('header-drawer, menu-drawer')) return;
  summary.parentElement.addEventListener('keyup', onKeyUpEscape);

to be above this comment line.

// Add this code make menu appears on hover
4

tim_1 thanks very much, it’s working well now.