Dawn theme header - expand without clicking

[cortenline]

Hello,

I have a "shop" in my menu and I want that submenu to expand without clicking on it. And I'd like to be able to click on "shop" and get to that category. This is my shop: https://corten-line.com/

And here is a site as an example: https://forwardfurniture.ca/ 

[Liquid_xPert_SJ]

@cortenline 

Steps

- Shopify Admin > Online Store > Edit Code > Theme.liquid file find </body> and paste below code before this 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>

 Hope this helps

[cortenline]

https://corten-line.com/ Now I can't move to subcategories.

[Liquid_xPert_SJ]

@cortenline 

refer to this instructional video

thanks

[cortenline]

Thank you, the code from the video doesn't work, but I found a comment from a random person who wrote the correct code:

<script> let items = document.querySelector(".header__inline-menu").querySelectorAll("details"); let dropdownItems = document.querySelector(".header__submenu"); items.forEach(item => { let timer; item.addEventListener("mouseenter", () => { clearTimeout(timer); item.setAttribute("open", true); let ulElement = item.querySelector("ul"); if (ulElement !== null) { ulElement.addEventListener("mouseleave", () => { timer = setTimeout(() => { item.removeAttribute("open"); }, 500); // Delay in milliseconds before closing the submenu }); } }); item.addEventListener("focus", () => { clearTimeout(timer); item.setAttribute("open", true); }); item.addEventListener("blur", () => { timer = setTimeout(() => { item.removeAttribute("open"); }, 500); // Delay in milliseconds before closing the submenu }); item.addEventListener("mouseenter", () => { clearTimeout(timer); item.setAttribute("open", true); }); item.addEventListener("mouseleave", () => { timer = setTimeout(() => { item.removeAttribute("open"); }, 500); // Delay in milliseconds before closing the submenu }); }); if (dropdownItems !== null) { dropdownItems.addEventListener("mouseleave", () => { items.forEach(item => { item.removeAttribute("open"); }); }); } </script>

[cortenline]

But I still can't figure out how to make the first item in menu clickable.. I found this tutorial https://www.youtube.com/watch?v=QraXtajEGPs but it's for old version of this theme. I can't find the correct line in code file.

[Liquid_xPert_SJ]

can i look into it? if yes i need access of store or need collaborator access code

[MichalKopec]

Hello, 

I think in order to make that functionality you'll need to add custom javascript that detects when someone hovers over the shop button and then add the open attribute to this particular menu item:

<details id="Details-HeaderMenu-1" class="mega-menu" open>
</details>

 I don't see a way to do that with css only, unless someone can correct me.