How can I change the header background color on Dawn?

Store Design
, ,
1

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.

2

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

3

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.

woolkind_0-1671551539477.png
woolkind_0-1671551539477.png1366×522 260 KB

4

Did you make the changes in the code?

5

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#M498282

6

@woolkind the provided link does not work.

EDIT: I did find the post

7

Hello @woolkind

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1671597568407.png
GemPages_0-1671597568407.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1671597593095.png
GemPages_1-1671597593095.png1527×909 58.8 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

8

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!