I want to add an arrow to the dropdown menu ( Prestige Theme )

[dreamtechzone_5]

Hello Everyone!

On my header menu, there’s a link called “Shop”. This is a dropdown. However, there’s no arrow displayed. I would like there to be an arrow displayed next to the words “Shop” like normal dropdown menus have.

https://urbanglowingstore.myshopify.com/

Password: Admin

Just like below image

[Arif_Shopidevs]

.header__menu-disclosure svg.icon.icon-chevron-down {
    display: inline;
    margin: 2px;
}

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

If you put this css in theme base.css and the js in your theme js area like theme.liquide footer area or any other area. it will dynamically add the arrow as SVG and the CSS made it aligned.

Then it will looks like my provided image.

This is what you are looking

Thank you

[dreamtechzone_5]

I pasted the css code but I don’t understand where to paste the next code.

[Arif_Shopidevs]

Inside assets\theme.js footer area insert the js code

[dreamtechzone_5]

I pasted the code at the beginning of the theme js file. Will this be a problem?

[Arif_Shopidevs]

No it is not a problem , I just saw you add more two drop down , they are looks nice. If the problem is sovled marked this post as solved.

If any error happens. I just rechecked their is not js error occurred in google console all looks great. We are always with you to help.
Thank you

[dreamtechzone_5]

Okay, Sir. Thank you. If I add a megamenu, will it work in the megamenu?

[Arif_Shopidevs]

If megamenu has the html tag dropdown they will work. if megamenu add different markup in that case only a new selector have to bind with the current js code. nothing much.

Thank you

[dreamtechzone_5]

Last Question, When I hover over the menu, the arrow points up. But normally it points down. And can the arrow be moved a little to the right? It’s right next to it.

[dreamtechzone_5]

Hello, Are you there?

[dreamtechzone_5]

When I paste the code, it looks like this in mobile mode. I only want to add arrows to the menu in desktop mode. I want it to have no effect in any other format.

[Arif_Shopidevs]

@dreamtechzone_5
Give me some time i am sending you the update code which work only desktop

[Arif_Shopidevs]

@dreamtechzone_5 Use this css it will add space also hide arrow in mobile

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

[dreamtechzone_5]

Wow, it worked. But when I hover over the menu, the arrow will point upwards.

[Arif_Shopidevs]

@dreamtechzone_5 Please change the first css
svg.icon.icon-chevron-down { display: none; }
to bellow code. it hide the currency drop down to hide the mobile arrow.

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

Bellow is the update js code which used before whill change the arrow in hover

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

[dreamtechzone_5]

When I hover over the menu, the arrow points up. But normally the arrow always points down.

[Arif_Shopidevs]

@dreamtechzone_5
Please follow my last suggestion remove this CSS tag svg.icon.icon-chevron-down
and insert

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

right now it is hide by CSS that CSS code was wrong

[dreamtechzone_5]

Please give me the complete css file. I am adding the css code like this. As a result it is showing problem in mobile mode.

[Arif_Shopidevs]

Here is the full css

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

[dreamtechzone_5]

When I am inside the dropdown menu, the arrow will be pointing up. But when I exit the menu, the arrow will be pointing down. Apart from that, everything is fine.