How to create a hover dropdown effect on website header?

Store Design
,
1

Hello! I’d like my collection and subcollections to appear without clicking the mouse only when you put the mouse over “Kleding” “Maat” etc.

Like the one on this site: https://blvck.com/ (When you go over the MEN/WOMEN collection on header)

My site is: https://vintengo.myshopify.com/?_ab=0&_fd=0&_sc=1

Password: thupea

2

Hello @Vintengo ,

You need to write a script which will change the attribute from false to true and add attribute open to parent element just on hover of the menu which have dropdown.

If you need developer to write it you can drop and email to me.

Thanks

3

Hi @Vintengo

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can add this js on your theme.liquid file before tag:

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

Regards,

San