Change the Color of a Single Item in the Header Nav Bar Menu

Store Design
,

Topic summary

A user needed to change the font color of a single navigation menu item (“WIN”) in the Reformation theme’s header. Two working solutions were provided:

Solution 1 (CSS in Custom CSS):

  • Target specific menu items using CSS nth-child selector
  • Example: .full-menu li:nth-child(4) > a { color: red; }

Solution 2 (theme.liquid modification):

  • Add custom <style> tags directly in theme.liquid file above </head>
  • Navigate to: Online Stores > Themes > Edit code > theme.liquid

Follow-up issue resolved:
Another user encountered the same need but discovered the color change only worked on desktop, not mobile. This was solved by adding separate CSS targeting the mobile menu structure:

.mobile-menu-drawer--inner ul.mobile-menu > li:nth-child(2) a { color: red; }

Both users confirmed their issues were fully resolved. The key insight: Reformation theme uses separate menu structures for desktop and mobile versions, requiring distinct CSS selectors for each.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How do I change the styling (eg font color) of one item on my header nav bar? I would like to do this within the “custom css” tool for this section within the theme customiser.

The item I’d like to change is “WIN”. Website is https://vitaleveryday.com. I am using the Reformation theme.

Thank you very much.

2

Hi @cherise16 ,

May I suggest code below:

.full-menu li:nth-child(4) > a {
  color: red;
}

You only need replace " red " color by your color

1 Like
3

Hi @cherise16

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

PageFlyRichard_0-1717572225501.png
PageFlyRichard_0-1717572225501.png1313×953 238 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
4

Fantastic, thank you very much for this Richard, it worked perfectly.

Cherise

5

This worked perfectly too, thank you very much.

Cherise

6

How about changing the color of the second items on my menu?

Website is https://www.charlottengstudio.com. I am using the Reformation theme.

7
ul.thb-full-menu > li:nth-child(2) a { color: red; } I have solved it. Thank you from the replies above.
8

I have solved the problem from MacBook version.

However, when surfing from mobile, the colour still does not changed.

my website is www.charlottengstudio.com

I added below code on theme.liquid and paste the code above the

ul.thb-full-menu > li:nth-child(2) a { color: red; } ![mobile.jpeg|1170x2532](upload://z3Ol0LSrJzaO9C2phtZTgS7gloO.jpeg)
9

Hi @jackoass9847 ,

You can add more code below for mobile version. Because your store used 2 versions. One menu for desktop, one menu for mobile version.

.mobile-menu-drawer--inner ul.mobile-menu > li:nth-child(2) a {
  color: red;
}
1 Like
10

Problem Solved.Thank you so much for prompt reply.