Please check the picture below. I would love to remove the arrow on the menu when there is nested menu.
My url: andrejewelry.com
Password: Thanksforyourhelp
Thanks!
Topic summary
A user wants to remove dropdown arrows from the navigation menu in Shopify’s Dawn theme. Two solutions are provided:
CSS-based solutions:
- Add custom CSS to hide the arrow icons by targeting
.svg.icon.caretand.summary.list-menu__itemelements - Code can be added either to the theme’s CSS file (base.css, style.css, or theme.css) or directly in theme.liquid above the
</head>tag
Implementation steps:
- Navigate to Online Store > Themes > Actions > Edit code
- Locate the appropriate file (CSS or theme.liquid)
- Insert the provided CSS code
- Save changes
The original poster confirmed both solutions worked successfully. A follow-up question was raised about hiding the “go back” arrow in dropdown menus, but remains unanswered.
1 Like
Hi @AndreaHuang
Check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
svg.icon.icon-caret {
display: none;
}
summary.list-menu__item {
padding-right: 1.2rem !important;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
3 Likes
Hi @AndreaHuang
This is Richard 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
Hope this can help you solve the issue
Best regards,
Richard | PageFly
1 Like
Amazing! Thank you so much!!
This is the best solution. Thank you!
1 Like
Glad that i can help. Let me know if you have any questions
