Hello Everyone!
Someone helped me to add an arrow to the menu. When I hover over the menu, the arrow points upwards. I don’t want the arrow to appear when I hover over the menu. I want the arrow to appear upwards when I click on the menu. The arrow will appear upwards as long as I am in the menu. When I exit the menu, the arrow will show downwards again. I added these codes. I want to keep the arrow exactly like the website below. Only for desktop. All other formats are fine. Please help me. Thank you.
https://urbanglowingstore.myshopify.com/
Password: Admin
Refference Website: https://www.lalumierecollection.co.za/
CSS CODE
.header__menu-disclosure svg.icon.icon-chevron-down {
display: inline;
}
.header__menu-disclosure summary.h6 {
display: inline-flex;
align-items: center;
gap: 5px; /* Adjust space as needed /
}
.header__menu-disclosure. summary.h6 svg {
margin-left: 5px; / Adjust space as needed */
}
.accordion__disclosure
svg.icon.icon-chevron-down {
display: none;
}
THEME.JS CODE
document.querySelectorAll(“summary.h6”).forEach(summary => {
let svgIcon = summary.querySelector(“.icon-chevron-down”);
if (!svgIcon) {
svgIcon = document.createElementNS(“http://www.w3.org/2000/svg”, “svg”);
svgIcon.setAttribute(“aria-hidden”, “true”);
svgIcon.setAttribute(“focusable”, “false”);
svgIcon.setAttribute(“fill”, “none”);
svgIcon.setAttribute(“width”, “10”);
svgIcon.setAttribute(“class”, “icon icon-chevron-down”);
svgIcon.setAttribute(“viewBox”, “0 0 10 10”);
const path = document.createElementNS(“http://www.w3.org/2000/svg”, “path”);
path.setAttribute(“d”, “m1 3 4 4 4-4”);
path.setAttribute(“stroke”, “currentColor”);
path.setAttribute(“stroke-linecap”, “square”);
svgIcon.appendChild(path);
summary.appendChild(svgIcon);
}
// Define hover effect
summary.addEventListener(“mouseenter”, () => {
svgIcon.innerHTML = ‘’;
svgIcon.setAttribute(“class”, “icon icon-chevron-up”);
});
summary.addEventListener(“mouseleave”, () => {
svgIcon.innerHTML = ‘’;
svgIcon.setAttribute(“class”, “icon icon-chevron-down”);
});
});