Dawn theme header - expand without clicking

cortenline
New Member
4 0 0

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/ 

 

 

Replies 7 (7)

Liqiud_xPert_SJ
Shopify Partner
723 92 112

@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

 

 

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
cortenline
New Member
4 0 0

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

Liqiud_xPert_SJ
Shopify Partner
723 92 112

@cortenline 

 

refer to this instructional video

 

thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
cortenline
New Member
4 0 0

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

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.

Liqiud_xPert_SJ
Shopify Partner
723 92 112

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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

MichalKopec
Excursionist
37 5 4

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.