FROM CACHE - en_header

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

Solved
Caligirl917
Excursionist
18 0 6

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)

Accepted Solutions
wmisback
Shopify Partner
26 3 23

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

View solution in original post

Replies 22 (22)
Kinjaldavra
Shopify Partner
2302 569 1408

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.

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
dmwwebartisan
Shopify Partner
11146 2393 3433

@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 | Click here GemPages The most powerful Shopify page builder.
wmisback
Shopify Partner
26 3 23

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
18 0 6
wmisback
Shopify Partner
26 3 23

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
HighPointCoffee
New Member
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!

DavidR2D2
Tourist
9 0 6

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
New Member
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.

AlessandroGn
New Member
18 0 0

This solution not work with Dawn 2.0

Magento developer, Shopify developer, Woocommerce Developer
made4Uo
Shopify Partner
2589 474 704

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
blaquephoenixcr
New Member
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 @wmisback , 

 

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
New Member
1 0 0
glowtheunicorn
New Member
1 0 0
Deadmorgan
New Member
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 2

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
New Member
1 0 0

Hi,

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