How to fix CSS header drawer menu list issue?

How to fix CSS header drawer menu list issue?

Yehyanabha
Visitor
2 0 0

IMG_2069.png

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

Reply 1 (1)

PageFly-Noah
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>

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

Or you can replace the code 

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

 

 

 

 

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.