Hi,
I recently changed my store code to open the dropdown parent menu when hovering. However, it stays highlighted as if I am in the menu. How can I fix this behavior back to where the selected menu is the only highlighted button? The code I used to change is below and my store link is bonmaison.shop. Thank you so much in advance for your help!
Add “menu-dropdown.js” to assets folder
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 add below code to header.liquid file
Then change the header-dropdown-menu.liquid (or whatever your header is)
From
<span {%- if link.child_active %} class=“header__active-menu-item”{% endif %}>{{ link.title | escape }}
To
{{- link.title | escape -}}