
Shopify Horizon Theme Mobile menu fix for Firefox
If you are using the Horizon 1.0.5 Theme or earlier you may have come across a little issue with the mobile view of the site in the Firefox browser.
When the menu is opened on mobile using the burger style icon:
The menu opens as expected:
But when the menu is closed the X icon remains and the user cannot interact with the page:
Simple Fix
Open the assets/header-drawer.js file and add this line of code around line 106:
details.removeAttribute('open');
This will ensure that the 'open' attribute is removed from the <details> tag.
The assets/header-drawer.js file seems to be changing regularly in each version release. Look for the following function:
/**
* Close the closest menu or submenu that is open
*
* @param {HTMLDetailsElement} details
*/
#close(details) {
Then find these two lines in the function:
summary.setAttribute('aria-expanded', 'false');
details.classList.remove('menu-open');
And add the new line of code between:
summary.setAttribute('aria-expanded', 'false');
details.removeAttribute('open');
details.classList.remove('menu-open');