I would like radial gradient color on my top bar

Store Design
1

Hi,

I tried that code in theme.liquid before of body, but doesn’t work. Could anybody help me please what is wrong or how could i change the color to gradient?

#shopify-section-announcement-bar .announcement-bar{ background-image: linear-gradient(blue, white); }
1 Like
2

Hi @Vitotuzep ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

@Vitotuzep

Please share your store URL!

Thanks!

4

Hi,

My URL is https://vitotuzep.hu/

5

Hi,

My URL is https://vitotuzep.hu/

Thank you

6

perfectly I would like this colors, radial-gradient(circle, rgba(8,55,137) 50%, rgba(199,219,244) 50%)

7

perfectly I would like this colors, radial-gradient(circle, rgba(8,55,137) 50%, rgba(199,219,244) 50%)

8

Hi @Vitotuzep .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.theme__header__toolbar {
    background-color: #021224;
    background-image: linear-gradient(315deg, #1d6fd3 0%, #f5f7f6 80%);
}

.theme__header__toolbar .theme__header-inner {
    background: transparent;
}

websensepro_0-1688734505347.png
websensepro_0-1688734505347.png1348×441 368 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
9

Hi, Thank you. Where can i found the base.css? And in the css, exatcly where need i paste?

10

@Vitotuzep

To fulfill your request, please add the following code to your assets / base.css or theme.css bottom of the file.

.theme__header__toolbar {background: linear-gradient(blue, white) !important;}
.theme__header__toolbar .theme__header-inner {background: linear-gradient(blue, white) !important;}
1 Like
11

Radial Gradient.

.theme__header__toolbar {
    background: transparent;
    background-image: radial-gradient(#004184 30%, #ffffff 60%);
}

.theme__header__toolbar .theme__header-inner {
    background: transparent;
}

websensepro_0-1688735252915.png
websensepro_0-1688735252915.png1349×610 586 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
12

Goto online store click the 3 dots go to edit code.

websensepro_0-1688735465150.png
websensepro_0-1688735465150.png1347×451 67.9 KB

Search the base.css file and open the file .

paste the bottom.

websensepro_1-1688735558326.png
websensepro_1-1688735558326.png1349×622 51.1 KB

websensepro_2-1688735613668.png
websensepro_2-1688735613668.png1343×577 37 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
13

Oh, ok it starting to be complicated, 'cos i haven’t got Base.css in the Assets. Need i add new?

14

@Vitotuzep

Please add CSS to your assets/theme.css bottom of the file.

Thanks!

1 Like
15

you search style.css , theme.css

1 Like
16

you dont make the file of base.css you should search style.css file and theme.css

file if any file available in both of them then you past the file in the bottom.

17

@Vitotuzep

Please try this code

.theme__header__toolbar {background: linear-gradient(blue, white) !important;}
.theme__header__toolbar .theme__header-inner {background: linear-gradient(blue, white) !important;}
18

That was help. It is working now. Thank you so much :slightly_smiling_face:

19

Thanks.

Please Mark my Solution.

1 Like