Shopify themes, liquid, logos, and UX
thepassprints.com
password: Ruxton
Hi,
See the below screenshot. My dropdown menu disappears once I move the mouse below "Featured".
Help?
Thank you.
Alyx
Solved! Go to the solution
This is an accepted solution.
It seems you’re implementing custom code to automatically open a list when hovering over an item. There are two issues with this custom code:
1. Event Listener Overlap Causes Memory Leak
The custom code is listening to nested events, which leads to memory leaks. Each time a user hovers over the menu, multiple event listeners are being added. (https://prnt.sc/cPMkjbmuj7t4)
Override your custom code to fix:
<script>
const inlineMenu = document.querySelector(".header__inline-menu");
const detailsItems = inlineMenu.querySelectorAll("details");
detailsItems.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
</script>
2. Vertical Menu Design Conflict with Hover Actions
For a vertical menu, using hover to toggle open/close actions isn’t ideal.
When a user hovers away from the Landscape menu, it automatically closes. This shortens the Shop menu’s height, causing the cursor to move outside the Shop menu area, which also closes it. (https://prnt.sc/BdFpASTSInig) (https://prnt.sc/fSZxrgPP1i5R)
Hope this guide is helpful to you! 😊
This is an accepted solution.
It seems you’re implementing custom code to automatically open a list when hovering over an item. There are two issues with this custom code:
1. Event Listener Overlap Causes Memory Leak
The custom code is listening to nested events, which leads to memory leaks. Each time a user hovers over the menu, multiple event listeners are being added. (https://prnt.sc/cPMkjbmuj7t4)
Override your custom code to fix:
<script>
const inlineMenu = document.querySelector(".header__inline-menu");
const detailsItems = inlineMenu.querySelectorAll("details");
detailsItems.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
</script>
2. Vertical Menu Design Conflict with Hover Actions
For a vertical menu, using hover to toggle open/close actions isn’t ideal.
When a user hovers away from the Landscape menu, it automatically closes. This shortens the Shop menu’s height, causing the cursor to move outside the Shop menu area, which also closes it. (https://prnt.sc/BdFpASTSInig) (https://prnt.sc/fSZxrgPP1i5R)
Hope this guide is helpful to you! 😊
Very concise. Thank you!
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