Re: Chang Drawer Menu Icon

How to change the drawer menu arrow icon to '+'?

MennaJe
New Member
5 0 0

I want to change the arrow icon arrow .pngin drawer menu to "+" for something like this plus.jpg

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @MennaJe,

 

Can I have the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MennaJe
New Member
5 0 0
ThePrimeWeb
Shopify Partner
2138 615 493

Hey @MennaJe,

 

I can give you the code to turn it into a "+" icon, but I can't make the menu open below the main menu. It will still go to another "page" like it's doing now. 

 

To make it expand like a + and - menu is supposed to, There's some heavier development work to do.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MennaJe
New Member
5 0 0

ok thanks

ThePrimeWeb
Shopify Partner
2138 615 493

hey @MennaJe,

 

This is the code to turn it into a "+" icon only. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.menu-drawer summary.menu-drawer__menu-item svg {
    display: none !important;
}

.menu-drawer summary.menu-drawer__menu-item:after {
    content: '+' !important;
    display: block !important;
    height: 20px !important;
    width: 20px !important;
    position: absolute !important;
    right: 10px !important;
    color: black !important; 
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707066055242.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!