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

jtunstallcahaba
Visitor
1 0 3

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

Replies 17 (17)

Zworthkey
Shopify Partner
5581 642 1565

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

FodorDora
Visitor
1 0 0

Can you help me please?

I would like my header menu to be hoverable.

www.chilidresses.hu

KetanKumar
Shopify Partner
36839 3635 11972

@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

wmiz
Shopify Partner
40 7 34

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
Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: willmiswebdev@gmail.com
Ethos_Chris
Visitor
3 0 0

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
Shopify Partner
29 0 1

On Dawn 2.0 not work.

Magento developer, Shopify developer, Woocommerce Developer
ArsoniK
Visitor
1 0 1

Work on Dawn 2.0 for me.

bubo
Tourist
16 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@bubo 

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
bubo
Tourist
16 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@bubo 

i have check now work on click not hover 

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
bubo
Tourist
16 0 1

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

bubo
Tourist
16 0 1

any updates?

 

KetanKumar
Shopify Partner
36839 3635 11972

@bubo 

yes just try this code

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

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
bubo
Tourist
16 0 1

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

bubo
Tourist
16 0 1

please help.

ridhi01
Shopify Partner
21 0 3

any update on this?