How to create gradient in header background

How to create gradient in header background

Greggy55
Excursionist
30 0 3

Hi guys , 

 

I want my background for my header to look like it is white on the left side , fade to pink in the middle where the logo will sit and then fade back to white on the other end , kind of like this image attached :

IMG-20240709-WA0022.jpg

 

How would I do this? 

Here is my current site : www.handmadegifts.co.za you will see the background is solid pink.

 

Thanks for any help!

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6827 1629 2007

Hi @Greggy55 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media only screen and (min-width: 990px){
sticky-header.header-wrapper {
 background: linear-gradient(to right, white, #f6cbc6, white);
}
header.header.header--middle-center, a.header__heading-link {
    padding: 0;
}
h1.header__heading {
    box-shadow: 10px 0px 20px rgba(246, 203, 198, 0.7), -10px 0px 20px rgba(246, 203, 198, 0.7);
}
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1720555065167.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Greggy55
Excursionist
30 0 3

Thanks. This works but only for the desktop site. How would I also make it display on mobile? on mobile it is just a white background now...

Made4uo-Ribe
Shopify Partner
6827 1629 2007

I just like to clarfiy, the logo is in the left side on the mobile screen so ill change form there? 

Do you mean like this? 

Made4uoRibe_0-1720628745094.png

If it is same instruction. 

 

@media only screen and (max-width: 989px){
sticky-header.header-wrapper {
    background:  linear-gradient(to right, #f6cbc6 30%, white 80%) !important;
}
.header {
    padding-top: 0px;
    padding-bottom: 0px;
}
.header__heading-link {
    padding: 0px;
    background-color: white;
    box-shadow: 
    10px 0 10px rgba(246, 203, 198, 0.7),
    20px 0 20px rgba(246, 203, 198, 0.5),
    30px 0 30px rgba(246, 203, 198, 0.3),
    -10px 0 10px rgba(246, 203, 198, 0.7),
    -20px 0 20px rgba(246, 203, 198, 0.5),
    -30px 0 30px rgba(246, 203, 198, 0.3);
}
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Greggy55
Excursionist
30 0 3

The logo must be in the middle, not on the left or right. 

 

Your original solution worked for normal (PC) website. But for mobile it was then displaying a white background.

Made4uo-Ribe
Shopify Partner
6827 1629 2007

So you want me to change the logo on the center for mobile right? 

I've only change the desktop cause the on mobile logo is on the right. You didnt mention anything.

Anyway, I add another codes to suit mobile and desktop center logo..

Please check. Thanks!

sticky-header.header-wrapper {
 background: linear-gradient(to right, white, #f6cbc6, white);
}
header.header.header--middle-center {
    padding-top: 0;
    padding-bottom: 0;
}
a.header__heading-link {
    padding: 0;
}
h1.header__heading {
    box-shadow: 10px 0px 20px rgba(246, 203, 198, 0.7), -10px 0px 20px rgba(246, 203, 198, 0.7);
}
@media screen and (max-width: 989px) {
    .header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
        text-align: center !important;
        justify-self: center !important;
    }
    .header--mobile-left {
        grid-template-columns: auto 2fr auto !important;
    }
}

 And Save. 

Result:

Made4uoRibe_0-1720815901619.png

Please, remove the background that you add before trying the code. It wont work if that codes still there. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.