Header menu item arrow active state

Technical Q&A

Topic summary

  • Issue: Change the arrow color for the active header menu item in a Shopify theme. An image was shared for context.

  • Solution: Edit Online Store → Theme → Edit code → base.css and add a CSS rule targeting the arrow SVG next to the active item: .header__active-menu-item + svg { color: #ff33fd; } (replace with desired color). This uses the adjacent sibling selector to style the SVG following the active menu link.

  • Outcome: The change worked as intended. The question is resolved; no further issues reported.

Summarized with AI on December 18. AI used: gpt-5.
1

Hello there,

I have a question: How can I change the color of the arrow for the active menu item?
ScreenShot Tool -20240929184532.png

Thanks for your help in advance,

Regards,

Adrian

2

Hello @adkowaty ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.header__active-menu-item + svg {
    color: #ff33fd;
}

Thanks

1 Like
3

Hello Guleria,

Thanks for your help. Working fine now. :slightly_smiling_face:

  • have a great day.

Regards,

Adrian