How can I change the color for one of the words in header bar?

Store Design
,

Topic summary

Goal: change the color of a single header menu item to red via CSS on a Shopify theme.

Key steps and proposals:

  • Store link shared for context: www.bionperfumery.com.
  • Initial CSS suggestion (add to Assets > skelet.css) targeted the 3rd menu item using nth-child(3) for desktop and mobile, forcing color: red !important.
  • A second suggestion advised adding code before in theme.liquid, but the actual code snippet was missing in the post (unclear/ineffective as provided).

Issue encountered:

  • After applying the CSS, additional elements were unintentionally colored. Screenshots indicate spillover beyond the intended item, and the user asked how to revert others to black.

Latest update/fix:

  • Revised CSS with a more specific selector for the desktop menu (header .menulink > nav > ul > li:nth-child(3) a) and a mobile selector, changing the target color to #8b0000 (dark red). This aims to limit styling to only the 3rd menu item so other items fall back to default black.

Notes:

  • nth-child(3) selects the third list item in the menu.
  • Outcome unresolved in-thread; user confirmation pending.
Summarized with AI on February 1. AI used: gpt-5.
1

I would like to change the color to red using the codes but I did not no how. can someone please help on this matter.

thanks

Screenshot 2023-02-06 at 17.06.44.png
Screenshot 2023-02-06 at 17.06.44.png2120×1362 265 KB

@Niraj_singh

2

Hello @manna94

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the store link?

3

www.bionperfumery.com

4

Hi @manna94 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/skelet.css->paste below code at the bottom of the file:

#header .menulink > nav > ul li:nth-child(3) a,
.mobnav .bordi.menus > c:nth-child(3) a{
    color: red !important;
}

I hope it would help you
Best regards,

Kate | PageFly

5

@manna94

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

You can replace it with another color.

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

6

this got colored as well how do I set back to normal ( black )

Screenshot 2023-02-06 at 20.51.27.png
Screenshot 2023-02-06 at 20.51.27.png1080×546 168 KB

1 Like
7

Hi @manna94 ,

You can replace previous code by below code in skelet.css:

#header .menulink > nav > ul > li:nth-child(3) a,
.mobnav .bordi.menus > c:nth-child(3) a{
    color: #8b0000 !important;
}

I hope it would help you
Best regards,

Kate | PageFly