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

Store Design
,
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