How to create gradient in header background

[Greggy55]

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 :

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!

[Made4uo-Ribe]

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:
• 

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

[Greggy55]

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]

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? 

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!

[Greggy55]

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]

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:

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

[Greggy55]

I input the code but nothing happened. 

When you say remove the background or the code wont work , what do you mean remove the background? I dont understand this statement. 

Thanks!!!

[Made4uo-Ribe]

oh, sorry i tohught i already mention it. In your base.css code you overide the header and add some code. 

Please, find this code in the base.css and remove. So the code above will work. 

Thanks!