Changing text color of header selected page

Store Design
,

Topic summary

A user seeks to change the text color of the selected/active page (“HOME”) in their website header, which currently appears in dark grey and they want to change to white.

Solution Provided:
Two developers offered CSS code solutions:

  • Insert custom CSS in theme.liquid file before </head> or </body> tag
  • Target the active menu item with: header span.header__active-menu-item { color: #000000 !important; }
  • Replace #000000 with desired color code (e.g., white: #FFFFFF)

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open theme.liquid file
  3. Paste the CSS code before closing </body> tag
  4. Save changes

Outcome:
Initially the user encountered issues with implementation, but after troubleshooting the code placement, the solution successfully worked. The user confirmed the fix resolved their issue.

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

Hi, how can I change the text colour of the selected page (HOME) on my website? Heres a screenshot. It does not seem to be an option in my theme color settings. Thanks

Screen Shot 2024-09-21 at 1.13.40 PM.png
Screen Shot 2024-09-21 at 1.13.40 PM.png2022×278 47.5 KB

1 Like
2

Hello @caitlynneal
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

Hello @caitlynneal
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

4

Thanks so much for you help!! @Tech_Coding www.silksoothehair.com

P: rtutti

5
  • Here is the solution for you @caitlynneal
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it

  • Change #000000 to color you

  • Here is the result you will achieve:

BSSTekLabs_0-1726887071172.png
BSSTekLabs_0-1726887071172.png367×134 3.08 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

You can add code by following these steps

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

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

header span.header__active-menu-item { color: #000 !important; /*change color according to you*/ }

Tech_Coding_0-1726887321886.png
Tech_Coding_0-1726887321886.png1347×249 57.3 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

7

Screen Shot 2024-09-21 at 3.02.58 PM.png
Screen Shot 2024-09-21 at 3.02.58 PM.png3088×1886 742 KB

Hmm, it didn’t seem to change- what am I doing wrong? @Tech_Coding

8

The code you have pasted is correct in the file but when I inspect it it looks like this

Tech_Coding_0-1726888395480.png

remove the code and paste it before

header span.header__active-menu-item { color: #000000 !important; /*change color according to you*/ }
9

Hi, how would I change the colour for the ‘home’ selected page? from dark grey to white

10

ah it worked!!! thank you