How can I change my header to a varying colour sequence?

Store Design
,

Topic summary

A user wants to apply a gradient color sequence to their Shopify store header, matching a specific reference website’s design, and make the header menu titles bold white instead of faded white.

Solutions Provided:

• Gradient Background: Add CSS code to Assets > base.css.liquid targeting .sticky-header.header-wrapper with a linear-gradient using specific hex colors (#ce0008c, #67723d5) at 315deg angle.

• White Bold Text: Add CSS targeting .header__menu-item span with color: #fff and font-weight: bold to the same stylesheet.

Implementation Steps:

  1. Navigate to Online Store > Theme > Edit code
  2. Open theme.liquid and paste markup before </head>
  3. Add provided CSS at bottom of base.css.liquid

The user confirmed the gradient solution works and requested the text color adjustment as a follow-up. Both solutions involve adding custom CSS to the theme files.

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

Hello to the community.

I would like my header to have a varying colour as seen in the picture below, if possible the exact same colour sequence as the picture I provided (I also provided a link to the website).
I would also like the colour of the titles in the header to have the same white colour as seen in the picture.
I will provide the link both to the target website and to my own website.
Website: https://fetch.com.cy/

Andy106_0-1675233964721.png
Andy106_0-1675233964721.png1916×436 247 KB

My site:
https://f3osn0kd9ufo45yy-68796285242.shopifypreview.com

Thanks in advance!

2

Hello @Andy106 ,

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

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1675234511262.png
GemPages_0-1675234511262.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

3

@Andy106 ,

sticky-header.header-wrapper.color-accent-1.gradient.header-wrapper--border-bottom {
    background: linear-gradient(315deg, #ec008c, #6723d5);
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

1 Like
4

Thanks that works well!
Also, how can I make the colour of the titles to be completely white, because now it has a faded white colour, I want it to be bold white.

My site:
https://f3osn0kd9ufo45yy-68796285242.shopifypreview.com

Thanks in advance!

5

@Andy106 ,

.header__menu-item span {
    color: #fff;
    font-weight: bold;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

1 Like