How can I change the header background color on Dawn?

[woolkind]

I recently changed the background of my store to an image. The issue is that the header is now transparent and I want it to be based on the colour scheme on the store and just be a solid colour so that it shows up properly. 

[GemPages · Accepted solution]

Hello @woolkind 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
div#shopify-section-header {
    background: #fff !important;
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[Finer]

@woolkind have you set up a color schema in the theme settings?

[woolkind]

Yes I have but the code I used for the background basically made it all transparent and then added the image as the background. so the theme doesn't work on the header or footer now. Im fine with the footer but the header looks odd when you select a drop down menu. I managed to get someone to help with that but it doesn't look right. 

I want the header to be solid like the drop down menu. and if it can be linked to the colours I selected in the theme that would be amazing.

[Finer]

Did you make the changes in the code?

[woolkind]

Yes, this post will help as it refers to the original code and the new code:  

https://community.shopify.com/c/shopify-design/dawn-background-image-header-issue/m-p/1868990#M49828...

[Finer]

@woolkind the provided link does not work.

EDIT: I did find the post

[GemPages · Accepted solution]

Hello @woolkind 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
div#shopify-section-header {
    background: #fff !important;
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[LitCommerce · Accepted solution]

Hi @woolkind,

Please go to Actions > Edit code > Assets > custom.css file and paste this at the bottom of the file:

.header-wrapper.gradient {
    background: var(--gradient-background) !important;
    background-attachment: fixed !important;
}

Hope it helps!