Change one menu items colour in Flex theme

Technical Q&A

Topic summary

Goal: Change a single menu item (“Christmas”) to red in the Shopify Flex theme using CSS.

Solution provided: Add a custom CSS rule in Online Store > Edit code > Assets > Style.scss targeting the menu link by its URL (attribute selector):

  • .navbar-link.header__link[href=“/collections/2022-christmas”] { color: red !important; }
    This targets the specific anchor (href) and forces the red color. The code snippet is central to the solution.

Outcome: The desktop/menu solution worked (acknowledged by the requester).

New development: Follow-up questions ask how to apply the same styling in the mobile menu.

Status: The mobile-menu-specific selector was not provided; the mobile solution remains unanswered and the thread is open. The next step would require identifying the mobile menu’s HTML classes/structure to apply a similar attribute-based CSS rule.

Summarized with AI on February 1. AI used: gpt-5.
1

Hello, I am working with Flex theme from Out of the Sandbox and am wanting to find out how to change one menu item title to be a different color. I know it is possible with custom CSS but all the solutions I’m finding online are not working. I’m quite a beginner with coding. I am wanting to change our Christmas menu item to show up red.

Thank you for the help!

2

Hellp @MegShone ,
Please share your store URL.

1 Like
3

Oh, I forgot to put that in, https://niftygifts.co.za/, thank you!

4

@MegShone ,

Go to Online store >> Edit code >> Assets >> Find Style.scss file
Add this CSS below of the Style.scss

.navbar-link.header__link[href=“/collections/2022-christmas”] {
color: red !important;

}

5

Thank you so much for the help!!

1 Like
6

Hello, How would this be accomplished in the mobile menu?

7

Hi! I was wondering how I could apply this to my mobile menu?