Solved

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

aaskretail
Excursionist
13 2 3

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>

BrowserWindowChanged.PNG

 

fullscreen.PNG

 

windowsmall.PNG

 

AASK
Accepted Solution (1)

aaskretail
Excursionist
13 2 3

This is an accepted solution.

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

AASK

View solution in original post

Reply 1 (1)

aaskretail
Excursionist
13 2 3

This is an accepted solution.

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

AASK