How can I alter the header color on scroll with the Dawn Theme?

Store Design
1

Hi, I would like to change my header from transparent to black (#000) when scrolling the site.

Any help would be greatly appreciated! :slightly_smiling_face:

I am using the Dawn Theme for reference!

Thank you.

2

Hi @AllOut ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hi @AvadaCommerce

https://5swyxmfj361kgxmw-60894675174.shopifypreview.com

password: agleay

4

Hi @AllOut ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.shopify-section-header-sticky .header-wrapper {
    background: #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Hi @AvadaCommerce ,

Thank you so much! It was so difficult to work out the class I had to change haha!

I have accepted it as the solution, amazing, thank you again.

1 Like
6

hey @AvadaCommerce ,

Sorry, I have noticed this header effect takes place on every page, would you have an idea how to get rid of the transparent effect on all pages except for the homepage? So on very other page it would be just black?

Thank you! :slightly_smiling_face: