Solved

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

Caligirl917
Excursionist
18 0 8

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

Accepted Solution (1)
wmiz
Shopify Partner
40 7 37

This is an accepted solution.

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

Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: willmiswebdev@gmail.com

View solution in original post

Replies 48 (48)

Kinjaldavra
Shopify Partner
2302 570 1424

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.

dmwwebartisan
Shopify Partner
12321 2551 3712

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Caligirl917
Excursionist
18 0 8

wmiz
Shopify Partner
40 7 37

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!

Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: willmiswebdev@gmail.com
Caligirl917
Excursionist
18 0 8
Worked perfectly! Thank you so much!!
wmiz
Shopify Partner
40 7 37

This is an accepted solution.

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

Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: willmiswebdev@gmail.com
HighPointCoffee
Visitor
1 0 0

Hello, 

Is there a way I can have the submenus and their options displayed all at once (preferably in separate columns) while hovering over the main parent menu? So you wouldn't have to hover over the submenus as well to see their options?

Thanks!

Vasilis12
Visitor
2 0 0

Hello and thanks,
On Dawn 7.0.1 hover works but when try to click a Subcategory it dissapears, any help?

Best, 

medusasmakeup
Excursionist
45 1 15

was there a solution to this?

Bhartiya
Visitor
2 0 0

Hi, 

Can you help me with the update code for Shopify Dawn Theme 9.0.0?


While using the above code, I am getting an issue while hovering on the menu links, when I scroll down to the sub menu, the whole thing vanishes. 

Vasilis12
Visitor
2 0 0
Hi

I left it without hovering,
iska1
Visitor
1 0 0

Hi!

Im trying to implement the code on my refresh theme, but sadly the hover function wont stick, ie when i move my mouse cursor a bit down to click on a menu item, the menu disappears, could you please help out?

 

Not applicable

Thanks! @wmiz . Works like charm

DavidR2D2
Excursionist
13 0 12

Question about editing the source code, when Shopify does updates, does it override the code that we insert and we have to do it all over again later, or does our code remain intact and unchanged? Thanks. 

PawelCraftline
Visitor
1 0 1

@DavidR2D2

 

Just dropping by for the solution thought I'd answer your question.

 

No, Shopify does not change amended code upon update to my knowledge. This would make a lot of businesses extremely unhappy, as most professional Shopify stores have custom code to some capacity. Hope this helps.

AlessandroGnola
Shopify Partner
29 0 1

This solution not work with Dawn 2.0

Magento developer, Shopify developer, Woocommerce Developer
made4Uo
Shopify Partner
3833 716 1167

Try this one. No javascript being use. Just HTML and css. Check the video for more info

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
blaquephoenixcr
Visitor
3 0 0

Thank you so much. I've been trying to find this for my Sense theme fore the longest while now. You are a lifesaver.

Maollin
New Member
6 0 0

Hi @wmiz , 

 

first of all thank you for the code as well as for your videos on YouTube. I tried it out and it worked perfectly for me, the only thing is, that I have two submenu points under my menu. Now with the help of your code I can hover over the menu items and also select my submenu pages but when I move my mouse away from the first item, the entire menu closes and I can't select my 2nd sub-item at all or move my mouse to the 2nd sub-item. Do you also have this problem or is there any known solution for something like this? 

 

I hope you can help me. 

 

Thank you in advance

 

Maollin

shashavali
Visitor
1 0 0

Not Working on Dawn 2.0

 

glowtheunicorn
Tourist
3 0 0

This worked beautifully!

Thank you.

Deadmorgan
Visitor
2 0 1

In the new 5.0 this opens the megamenu, but when you try to move the mouse down to the menu it closes. Any idea?

cpt_jack
Shopify Partner
3 0 3

For the recent Dawn updates, you can use the following code. It's a bit long and not the best formatted, but it works alright.

First, you need to find the  .mega-menu__content container in your header file and add the following events:

onmouseover="jackMousein(this)" onmouseleave="jackMouseout(this)"

 

You can add the following JS at the end of the header file(before the schema content).

 

<script>
    function jackMousein(x){
        let nodd = x.parentElement;
        nodd.setAttribute('megaopen', true)
    }
    function jackMouseout(x){
        let  nodd = x.parentElement;
        nodd.removeAttribute('megaopen')
    }
    let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
    items.forEach(item => {
        
        item.addEventListener("mouseover", () => {
            item.setAttribute("open", true);
            item.querySelector("ul").addEventListener("mouseleave", () => {
                setTimeout(function(){
                    if(item.hasAttribute('megaopen')){
                        item.setAttribute("open", true);
                    }
                    else{
                        
                        item.removeAttribute("open");
                    }
                }, 500);
            });
            item.addEventListener("mouseleave", () => {
                
                setTimeout(function(){
                    if(item.hasAttribute('megaopen')){
                        item.setAttribute("open", true); 
                    }
                    else{
                        
                        item.removeAttribute("open");
                    }
                }, 100);
            });
        }); 
    });
</script>

 

 

You can also reach out to me for further consultation on the same.

 

PlantStudios
Visitor
1 0 0

Hi,

can someone explain me how to do it for the new refresh theme?
Thank you so much!

Qon
Visitor
1 0 0

This is working even now. But I need some help trying to make the menu fadeIn / out when you hover on the link while using this code or something else.. right now it's just popping the menu and making it disappear.

Highbeam
Shopify Partner
3 0 3

Hi Wmisback, your solution works great on Sense theme. How can I put hyperlink to parent menu in the dropdown. Your help will be highly appreciated. Thanks

John_Starc
Excursionist
25 2 3

Hello @wmiz , I just followed your solution, and its amazing but recently I increased the menus in the list and facing an error.
If you go to my website www.cloudstore.pk and then women you will see that last two menus can be selected. The list automatically gone hidden while we move the mouse to Bottoms and Shawls.

Need your support to fix it. 

kusimo
Shopify Partner
8 0 6

You can also achieve the same result by pasting this code in the global.js (This is inside the assets folder (assets/global.js)).

 

Look for this line of code 'document.querySelectorAll('[id^="Details-"] summary').forEach((summary)'. On my own file it starts on line 9.

 

Inside the block, add the code below: 

 

 

  // Add this code make menu appears on hover
  summary.addEventListener('mouseover', (event) => {
   const menuDetails = event.currentTarget.closest('details');
   const menuListContainer = menuDetails.closest('ul')
   event.currentTarget.setAttribute('aria-expanded', 'true');
   menuDetails.setAttribute('open', 'true');

    menuListContainer.addEventListener('mouseleave', () => {
      menuDetails.removeAttribute('open');
      summary.setAttribute('aria-expanded', 'false');
    });

    menuDetails.addEventListener("mouseleave", () => {
      menuDetails.removeAttribute("open");
      summary.setAttribute('aria-expanded', 'false');
    });

  });

 

 

 make-menu-appears (1).png

Korinth
Visitor
2 0 0

Thank you! this worked for me in Dawn 2.0. 

MehriZada
Visitor
3 0 1

Thanks! It worked for me too.

 

TeamShazoo
Visitor
1 0 0

For me the header won't remain hovered when I move mouse, unsure why I have tried all code suggestions in here but can't seem to make it stick.

prophecy
Visitor
1 0 0

Hello, same for me. - Tried several codes.

 

Once you hover and move your mouse the drop-down menu instantly disappears, have you found a solution?  

kusimo
Shopify Partner
8 0 6

@iamtess @prophecy  

Hello, the problem can arise when there is a significant distance between the menu item and the dropdown container. Whenever the user hovers over the menu item, the dropdown (ul) appears, but if the user moves toward the dropdown menu, there might be a gap between the link and the dropdown menu. This can cause the dropdown to close before the user can reach it.

To solve this issue, you can try reducing the space between the list item and the dropdown container. For instance, you can add the following CSS to your theme, which will eliminate any margin at the top of the dropdown menu:

ul.header__submenu {
    margin-top: 0px;
}

 If this doesn't work, you should also ensure that there is no margin at the bottom of the menu item. You can do this by adding the following CSS to your theme:

summary.list-menu__item { margin-bottom: 0px;}

Our goal is to make sure that there is no space between the list item and the dropdown menu, allowing the user to access the dropdown menu without any obstacles. 

iamtess
Shopify Partner
3 0 2

Thankyou @kusimo I will give this a try.✌️

 

lariwo
New Member
8 0 0

Thank you @wmiz !!

it works perfectly on Refresh theme version 11.0.0

iamtess
Shopify Partner
3 0 2

Hello - thankyou this worked for me when I hover but it closes before I can click. Any tips? 

Korinth
Visitor
2 0 0

I'd like to give an update as I had to remove this line of code, it worked on desktop but I noticed that my mobile menu would not show any of the sublinks. Rather than play with it further, I removed the code. If there is a way to make sure it works on mobile too I'd love that!

raheelahmad9258
New Member
4 0 0

yes facing same issue on mobile preview.

CaptainHuler
Visitor
2 0 0

Hello,
on desktop it works like magic but in the same time crashes on the mobile. I can't click on anything because there is not anything... 
*Everything worked correctly before I applied this code.

How to fix this problem?
Thank you!

Kind regards

fluxus
Visitor
1 0 0

This works for the top menu, but the unintended consequence is that also auto expands other dropdowns further down the page. Anyway to have it only work for the menu items?

yutapon
Shopify Partner
1 0 0

This is the best solution for Dawn ver.13.0.1.

Thanks for your huge help!

TheVixensBrush
Tourist
4 0 1

Thank you! This worked for Crave! 14.0.0!

agbulaka
Visitor
1 0 0

Hi Wimz,

 

When you add this code the menu opens when you hover but when you go down to sub menu items after two items menu closes.

is there a way to prevent this.

 

Best Regards.

Ali

 

medusasmakeup
Excursionist
45 1 15

is there a solution to the menu disappearing before you can click it? I am using sense theme, thanks!

fercar
Visitor
1 0 0

hello! i want to do theh same with my sense theme, i looked for the "sticky headers" line and I couldnt find it 😞 I alreeady have a mega menu on my website (www.peripawear.com) can you please help me so I can do the same... 

 

i just cant seem to find where to add this code in my weebsite code page

crebecca
Tourist
13 0 1

Hi Wmiz

 

Thanks so much for this code. It works great on my menu,

 

The only issue is- I have some collapsible tabs in my product descriptions, and these now open on hover (not click). They disappear when you hover away so I only want the hover to be applicable to the main navigation menu. is there a way of doing this?

 

Thanks

Chloe

cybermyte
New Member
4 0 0

To fix the issue where the submenu disappears when hovering off the inline menu item and onto the submenu

To fix the issue where the submenu disappears when hovering off the inline menu item and onto the submenu, you need to modify your JavaScript code. The current implementation closes the submenu whenever the mouse leaves the inline menu item, even if it enters the submenu itself.

You can achieve the desired behavior by modifying the event listener to check whether the mouse is still within the bounds of either the inline menu item or the submenu before removing the "open" attribute. Here's the modified code:

 

 

<script>
  let items = document.querySelector(".list-menu--inline").querySelectorAll("details");
  
  items.forEach(item => {
    let submenu = item.querySelector("ul");
    
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
    });

    item.addEventListener("mouseleave", (event) => {
      if (!isMouseWithinBounds(item, event) && !isMouseWithinBounds(submenu, event)) {
        item.removeAttribute("open");
      }
    });
  });

  // Function to check if mouse is within bounds of an element
  function isMouseWithinBounds(element, event) {
    const rect = element.getBoundingClientRect();
    return (
      event.clientX >= rect.left &&
      event.clientX <= rect.right &&
      event.clientY >= rect.top &&
      event.clientY <= rect.bottom
    );
  }

  // Global click event listener to close submenu when clicking outside
  document.body.addEventListener("click", (event) => {
    const isClickInsideMenu = event.target.closest(".list-menu--inline") !== null;
    if (!isClickInsideMenu) {
      items.forEach(item => {
        item.removeAttribute("open");
      });
    }
  });
</script>

 

This modification ensures that the submenu stays open when the mouse moves from the inline menu item to the submenu, as long as the mouse is still within the bounds of either element.

 

 

the last part of the script closes the submenu when you click anywhere off of it

** i used chatgpt to help me fix the issue i hope this helps someone!

davidhc
Tourist
4 0 2

Couldn't get this to work either unfortunately. Additionally, does your method work for the mobile menu? I noticed all of these solutions above do not apply to the mobile menu and in most case the mobile menu disappears.