Why does my dropdown menu disappear on mobile or smaller browser window sizes?

[aaskretail]

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>

[aaskretail · Accepted solution]

This issue was due to custom code in global.js file. Reverted the code to fix the problem.