All things Shopify and commerce
Hi All,
I am on Dawn 12.0 and have implemented some custom script in header.liquid file for the dropdown to open on the hover. The dropdown on Menu "All products" works completely fine on the desktop mode when the browser is fullscreen but as soon as I change the browser window size or use mobile version, the dropdown disappears and just shows X and a scroll bar. No menu items. Please check screenshots. Any help would be appreciated.
URL: https://irsyaofficial.com/
Custom Script in Header.Liquid:
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
console.log(items)
items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
Solved! Go to the solution
This is an accepted solution.
This issue was due to custom code in global.js file. Reverted the code to fix the problem.
This is an accepted solution.
This issue was due to custom code in global.js file. Reverted the code to fix the problem.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025