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

jtunstallcahaba
New Member
1 0 2

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com Get support
0 Likes
KetanKumar
Shopify Partner
23154 2333 8577

@jtunstallcahaba 

can you please share store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
FodorDora
New Member
1 0 0

Can you help me please?

I would like my header menu to be hoverable.

www.chilidresses.hu

0 Likes
wmisback
Excursionist
26 3 11

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!

Will Misback | Owner @ Triumvitech Digital
Check out my Shopify coding tutorials on YouTube
Need custom coding done? Get in touch: willmiswebdev@gmail.com