Menu Issues on Mobile

Technical Q&A

Topic summary

  • Issue: After launching a new Shopify site, the mobile menu button did not function on mobile.

  • Early diagnosis: A JavaScript error in the theme was identified; a helper offered to resolve it with collaborator access.

  • Root cause: Custom code modified the Dawn theme to open dropdowns on hover for desktop. On some mobile browsers that fire a “mouseover” before “click,” the menu opened on mouseover and then immediately closed on click.

  • Technical context: The changes were around Dawn’s assets/global.js (approximately L71–L85), adding a mouseover listener to [id^=“Details-”] summary elements and toggling aria-expanded/open attributes.

  • Fix: Reorder logic so the guard and escape handling run before the hover block—move:
    • if (summary.closest(‘header-drawer, menu-drawer’)) return;
    • summary.parentElement.addEventListener(‘keyup’, onKeyUpEscape);
    to above the “Add this code make menu appears on hover” section.

  • Outcome: After applying the reordering, the mobile menu works. The issue is resolved.

Summarized with AI on December 11. AI used: gpt-5.
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?

1 Like
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
2 Likes
4

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

1 Like