Dawn Theme - How to get drop down menu on hover instead of click?

[jtunstallcahaba]

How do i make it so the menu drops down when I hover the mouse over it instead of only when I click it?

[Zworthkey]

hii, @jtunstallcahaba 
Kindly share your store URL so,
I can solve your problem perfectly.
Thank You.

[FodorDora]

Can you help me please?

I would like my header menu to be hoverable.

www.chilidresses.hu

[KetanKumar]

@jtunstallcahaba 

can you please share store url?

[wmiz]

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>

Copy

 Hope this helps, let me know if you have any issues!

[Ethos_Chris]

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?

[AlessandroGnola]

On Dawn 2.0 not work.

[ArsoniK]

Work on Dawn 2.0 for me.

[bubo]

the hover function did worked but when im trying to click any menu collection the menu dissapears.

[KetanKumar]

@bubo 

can you please share store url 

[bubo]

https://bubo-2071.myshopify.com/ the password is bubo2072

[KetanKumar]

@bubo 

i have check now work on click not hover 

[bubo]

Yes I've removed the code. should I apply it again?

[bubo]

any updates?

[KetanKumar]

@bubo 

yes just try this code

https://www.youtube.com/watch?v=-oz3hgI09bk

[bubo]

The hover function works but the menu closes very fast and I cannot perform any click. Please help.

[bubo]

please help.

[ridhi01]

any update on this?

[neha0730]

try this code go to theme.liquid and paste it inside body tag  ...

<script>
document.addEventListener("DOMContentLoaded", () => {
const items = document.querySelector(".header__inline-menu").querySelectorAll("details");

items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
});

item.addEventListener("mouseleave", () => {
// Use a delay to check if the mouse is still in the menu
setTimeout(() => {
if (!item.matches(":hover") && !item.querySelector("ul").matches(":hover")) {
item.removeAttribute("open");
}
}, 200); // 200ms delay
});

item.querySelector("ul").addEventListener("mouseleave", () => {
setTimeout(() => {
if (!item.matches(":hover") && !item.querySelector("ul").matches(":hover")) {
item.removeAttribute("open");
}
}, 200); // 200ms delay
});
});
});
</script>