Dropdown Menu Arrow Issue (Prestige Theme)

[dreamtechzone_5]

Hello Everyone!

Someone help me add an arrow to 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 appear downwards again. I have added these codes. I want the arrow to be exactly like the website below. For desktop only. All other formats are fine. Please help me. Thanks.

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;
margin: 2px;
}
.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 */
}

svg.icon.icon-chevron-down {
display: none;
}

THEME.JS CODE

document.querySelectorAll(“summary.h6”).forEach(summary => {
if (!summary.querySelector(“.icon-chevron-down”)) {
const 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);
}
});

[Arif_Shopidevs]

@dreamtechzone_5
Please use this code in place of the above code you put. it will work

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);
    }

    // Toggle arrow on click
    summary.addEventListener("click", (event) => {
        event.stopPropagation(); // Prevent the click from propagating to the document

        const isExpanded = svgIcon.classList.contains("icon-chevron-up");

        // Reset all summaries before toggling the clicked one
        document.querySelectorAll("summary.h6 .icon-chevron-up").forEach(icon => {
            icon.innerHTML = '';
            icon.setAttribute("class", "icon icon-chevron-down");
        });

        if (!isExpanded) {
            svgIcon.innerHTML = '';
            svgIcon.setAttribute("class", "icon icon-chevron-up");
        }
    });

    // Reset icon when clicking outside
    document.addEventListener("click", () => {
        svgIcon.innerHTML = '';
        svgIcon.setAttribute("class", "icon icon-chevron-down");
    });
});

[dreamtechzone_5]

1. Clicking on the arrow does not close the dropdown menu.

2. The code causes problems in mobile mode:

(a) When I select the megamenu and select the click option, it looks like this in mobile mode.

(b) When you select the megamenu and select the hover option. Also, it looks like this in mobile mode.

[Arif_Shopidevs]

Hello, The arrow in mobile mode is is hide by the CSS which we gave you earlier.
Secondly in arrow we do not set click event.

I just you it will better to modify the theme header menu file and add the mark up without js. other wise different option which you tried may conflict.

Thank you

[dreamtechzone_5]

I have added the correct css code. As a result, the arrow is showing in the mega menu.

.header__menu-disclosure svg.icon.icon-chevron-down {
display: inline;
margin: 2px;
}
.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 */
}

svg.icon.icon-chevron-down {
display: none;
}