How can I fix my CSS to display '+' instead of '-' in my menu list?

Store Design
1

Hello everyone, I’ve got a problem in css I want to make menu list when I open details, the problem is when I press on jewelry everything get - I want them to be +

here’s the code I’m using:

.menu-drawer__menu-item>.icon-arrow {

display: none;

}

/* Initial style for all menu icons */

.menu-drawer__menu details summary.menu-drawer__menu-item::after {

content: ‘+’;

display: block;

position: absolute;

top: 50%;

right: 2.5rem;

transform: translateY(-50%);

transition: transform 0.3s ease-in-out; /* Add a transition for smooth animation */

}

.menu-drawer__menu details[open] summary.menu-drawer__menu-item::after {

content: ‘-’;

transform: translateY(-50%) rotate(180deg); /* Rotate “-” 180 degrees */

}

store url: https://91f4f3-3.myshopify.com/

password: mopawm

2

Hi @Yehyanabha

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Or you can replace the code

.menu-drawer__menu details[open] summary.menu-drawer__menu-item::after {
  content: '' !important;
  transform: unset !important;
}

PageFlyNoah_0-1696405993469.png
PageFlyNoah_0-1696405993469.png1112×963 60.5 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly