Shopify themes, liquid, logos, and UX
How do i make it so the menu drops down when I hover the mouse over it instead of only when I click it?
hii, @jtunstallcahaba
Kindly share your store URL so,
I can solve your problem perfectly.
Thank You.
can you please share store url?
Hi jtunstallcahaba, I just posted a video tutorial on my Youtube channel that may be what you are looking for.
Steps
1. Open your site's code editor
2. Open your site's header.liquid file (should be located in the sections folder
3. On around line 500 you will see a liquid tag referring to sticky headers, after this line copy the following code (it's a simple script that adds hover eventListeners to all menu items that create dropdowns)
<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>
Hope this helps, let me know if you have any issues!
Weekly Shopify advice: ShopSavvy newsletter
Does not work with Dawn 2.0
If a menu item extends down into an image, it's the image URL/action that is triggered when clicking the drop-down menu item.
Any Dawn 2.0 solution?
On Dawn 2.0 not work.
Work on Dawn 2.0 for me.
the hover function did worked but when im trying to click any menu collection the menu dissapears.
can you please share store url
i have check now work on click not hover
Yes I've removed the code. should I apply it again?
any updates?
yes just try this code
https://www.youtube.com/watch?v=-oz3hgI09bk
The hover function works but the menu closes very fast and I cannot perform any click. Please help.
please help.
any update on this?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024