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

[Caligirl917]

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

[Caligirl917]

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

[Kinjaldavra]

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]

@Caligirl917 

Please share your store URL!

Thanks!

[Caligirl917]

https://chngsara.myshopify.com/

Thank you!

[wmiz]

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!

[Caligirl917]

Worked perfectly! Thank you so much!!

[wmiz · Accepted solution]

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

[HighPointCoffee]

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]

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

Best, 

[medusasmakeup]

was there a solution to this?

[Bhartiya]

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]

Hi

I left it without hovering,

[iska1]

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?

[Anonymous]

Thanks! @wmiz . Works like charm

[DavidR2D2]

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]

@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]

This solution not work with Dawn 2.0

[made4Uo]

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

[blaquephoenixcr]

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]

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]

Not Working on Dawn 2.0

[glowtheunicorn]

This worked beautifully!

Thank you.

[Deadmorgan]

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]

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]

Hi,

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

[Qon]

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]

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]

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]

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');
    });

  });

 

[Korinth]

Thank you! this worked for me in Dawn 2.0. 

[MehriZada]

Thanks! It worked for me too.

[TeamShazoo]

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]

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]

@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]

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

[lariwo]

Thank you @wmiz !!

it works perfectly on Refresh theme version 11.0.0

[iamtess]

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

[Korinth]

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]

yes facing same issue on mobile preview.

[CaptainHuler]

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]

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]

This is the best solution for Dawn ver.13.0.1.

Thanks for your huge help!

[TheVixensBrush]

Thank you! This worked for Crave! 14.0.0!

[jsmcavady]

I found that in Dawn 7 - the "z-index: -1" was causing the nav to disappear to soon, other than that many thanks!

assets/component-mega-menu.css ( line:14 )

[agbulaka]

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]

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

[fercar]

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]

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]

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]

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.