Why isn't my menu-on-hover clickable?

Store Design
,
1

Hi,

So I have added a code to make my Menu appear on Hover however now, when I go into my website and the sub-menu opens on hover it closes straight away. It is not clickable and just disappears before I manage to move my mouse on it.

You can see a video of this using the link below:

https://www.loom.com/share/89dd9a9f21754a049cf5bc32584bcb8a?sid=15137fb2-bfd8-4fa1-bb1a-5a34c186de29

https://elnisfinancials.myshopify.com/ password: elnis

TIA

2

It seems like the code you added for the menu-on-hover feature is causing the sub-menu to disappear quickly without being clickable. This issue could be due to a conflict in the code or a timing setting. I recommend checking the code you added and ensuring it doesn’t interfere with the functionality of the sub-menu. You may need to adjust the timing or behavior settings to allow for a proper hover interaction. If you need further assistance, you can reach out to the support team at Postship Order Tracking app (https://apps.shopify.com/postship-2), they offer 24/7 live chat and email support and may be able to provide additional guidance on resolving this issue.

3

It seems like the hover effect on your menu is causing it to disappear quickly without being clickable. This issue might be due to the code you added. I recommend checking the CSS code related to the menu hover effect to ensure it is not conflicting with the menu’s functionality. Also, make sure there are no other scripts causing interference. If you need further assistance, feel free to reach out to the support team of the theme or consider using a Shopify app like Postship Order Tracking, which offers 24/7 support for quick resolution of such issues.

4

Hello @LSAccounting ,

Can you please share the code you added ?

Thanks

5

@Guleria

I have created an Asset (menu-dropdown.js) and pasted:

let items = document
.querySelector(“.header__inline-menu”)
.querySelectorAll(“details”);
for (const item of items) {
item.addEventListener(“mouseover”, () => {
item.setAttribute(“open”, true);
item.querySelector(“ul”).addEventListener(“mouseleave”, () => {
item.removeAttribute(“open”);
});
item.addEventListener(“mouseleave”, () => {
item.removeAttribute(“open”);
});
});
}

Then I have added this in header.liquid:

I have tried multiple different ways using YouTube videos and previous advice but they all seem to do the same thing.

Maybe it’s because the codes I find are for the Dawn Theme and the Theme that I am using (Origin) doesn’t accept them?

Thank you in advance.

6

Please try this one

let items = document
  .querySelector(".header__inline-menu")
  .querySelectorAll("details");

for (const item of items) {
  item.addEventListener("mouseover", () => {
    // Close any other open menus
    items.forEach((otherItem) => {
      if (otherItem !== item) {
        otherItem.removeAttribute("open");
      }
    });
    // Open the current menu
    item.setAttribute("open", true);
  });
}
7

@Guleria

You are a life saver!

Thank you :blush: