How to fix CSS header drawer menu list issue?

How to fix CSS header drawer menu list issue?

2 0 0


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 { 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] { content: '-'; transform: translateY(-50%) rotate(180deg); /* Rotate "-" 180 degrees */ } store url: password: mopawm

Reply 1 (1)

Shopify Partner
1317 233 268

Hi @Yehyanabha 


This is Noah from PageFly - Shopify Page Builder App


Please add this code to your theme.liquid above the </head> 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 </head>

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

Or you can replace the code 

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





Hope this can help you solve the issue 


Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.