Dawn Theme - How to add the ability to hover over dropdown in navigation menu without clicking

Solved
Caligirl917
Excursionist
13 0 4

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

Natztech
Shopify Partner
2125 546 1300

hello @Caligirl917 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

0 Likes
dmwwebartisan
Shopify Partner
9274 2151 2926

@Caligirl917 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Caligirl917
Excursionist
13 0 4
wmisback
Excursionist
26 3 11

Hi Sara, 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!

Check out my Shopify coding tutorials on YouTube
Need custom coding done? Get in touch: willmiswebdev@gmail.com
Caligirl917
Excursionist
13 0 4
Worked perfectly! Thank you so much!!
wmisback
Excursionist
26 3 11

This is an accepted solution.

Glad to help! Could you please mark it as an accepted solution?

Check out my Shopify coding tutorials on YouTube
Need custom coding done? Get in touch: willmiswebdev@gmail.com