Hamburger menu and search bar not working on mobile. Please help. Dawn theme

Store Design
, , ,
1

Ive been searching for the last 3 hours and all to no avail. My Hamburber menu on mobile only opens after multiple clicks and sub menus are blank. No Idea how to fix this.

Website is www.oasiscoral.com.au

Please any help would be appreciated

2

Hi @Danmuges ,

It seems there is an issue with the JS code in the global.js file.

Let me know if you need an assistance as I need an access to fix this issue.

Thank you

3

I would like assistance with this issue

4

Somebody has added a code to open your drop-downs on hover and close them when mouse leaves.

This works fine for desktop, however on mobile, depending on device/browser tapping the button may generate both “mouseover” and “click” events so that first one opens your menu and the second immediately closes it.

Here is the code which was added to your assets/global.js:

// 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;

The last line was in the original theme code.

I would try to move this last line to the top of this snippet above the comment.

This way, if menu in question is a part of menu drawer which supposed to work on mobile where there is no native hover, then we do not add show-on-hover functionality.

1 Like
5

Thankyou so much. This worked perfectly.

1 Like