Dawn theme. Hoverable Dropdown Menu

[MrZi]

Hello people. I have been trying to find a solution for a dawn theme Hoverable Dropdown Menu menu but can't seem to do it so asking for help, please Website: thefinesy.com Password: password Thanks!

[KetanKumar]

@MrZi 

on hover do you have like this?

[MrZi]

@KetanKumar What I meant was, at the moment, I have to click on the menu for it to appear. I want it to appear when you hover your mouse over it 

[KetanKumar]

@MrZi 

yes i mean i have check its work on hover

[artifulboutique]

How did you do it? I really need help with that!

[KetanKumar]

@artifulboutique 

sorry for any issue can you please share store url.

[artifulboutique]

It's me, again! www.artifulboutique.com

[KetanKumar]

@artifulboutique 

thanks i can't see hover on menu do you have fixed?

[artifulboutique]

No, I haven't fixed it. I realised something else with the menu thought. Because can't acces the main collections by clicking on it like with the Minimal theme. Do you think you can help me with that too? So, to be clear, I need help with 3 things (since you respond to my other post too!): 

1) I want the menu to hover (for now, people have to click and it's not user friendly);

2) I want the main collections to be accessible with a click in the dropdown menu;

3) In my product pages, I want my text to be visible even if I use Vitals app for bundles. 

You'll be my hero if you can fix this.

[KetanKumar]

@artifulboutique 

yes please show me new issue images 

[artifulboutique]

First of all, thank you so much for your help before. It works like a charm.

So... Every day I struggle with something new. Today, I saw that all my products without variant shows default in the page. Since you are my hero, I tough I will also ask you about that! In the images I shared, you'll see the dropdown menu. I'd really like the menu to hoover instead of having to click on it. The other thing I struggle with is that you can't have access to the entire collection by clicking on the section (in the dropdown menu) like you could with the Minimal theme. For example, I want to be able to access all the products in Art and craft supplies by clicking on it. Same with markers even though there are other category. I don't know if I am clear...

Thank you very much. 

[KetanKumar]

@artifulboutique 

thanks for update 

can we discuss about all point i have some quires 

[artifulboutique]

Of course! 

[wmiz]

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>

 Hope this helps, let me know if you have any issues!

[made4Uo]

Hi, 

Wrote a code using HTML and css. Drawer does not close unless you hover out from the drop down box. Please check the video for more info

[OlioMel]

I used the above code but the dropdown menus show up side by side instead of a column. I also can't click the first item (Essenciais) to access the full collection and have to create a sub menu (Todos os essenciais) for that.

Any solution?

[made4Uo]

Hi,

 In the menu, there are three levels. Please check my website to know what I mean. You should be able to click any of your menus. If you have trouble, I am just a click away