I want to change the arrow icon
in drawer menu to “+” for something like this
Topic summary
A user wants to replace the arrow icon in their drawer menu with a “+” symbol, providing example images of the desired change.
Current Solution Offered:
- A developer provided CSS code to change the arrow to a “+” icon
- The code should be added to
theme.liquidfile below the<head>tag - Important limitation: This solution only changes the visual icon; it does NOT make the menu expand/collapse in place like typical accordion menus
- The menu will still navigate to another page rather than expanding inline
Outstanding Questions:
- Making the menu function as a true accordion (expanding below with +/- toggle) would require more extensive development work
- Another user asked if the “+” can change to “-” when a submenu opens, but this remains unanswered
The discussion includes code snippets and reference screenshots that are central to implementing the visual change.
Hey @MennaJe ,
Can I have the link to your store?
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.
ok thanks
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 “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hello,
is it possible for the “+” to turn into a “-” when a sub-menu is open?