Solved

transparent header doesnt change to colour when scrolling on home page

jhoj
Tourist
8 0 1

 

i am using the origin theme, the issue im having is that when i scroll on the home page, the header stays transparent, but on every other page, the header is cream and when i scroll it stays the colour cream. 

 

how i want the page to be is that the only transparent header is on the home page, which it is, but then when scrolling it changes to a sticky header in the colour cream. the sticky header is currently on every page and on every page except the home page the header is how i want. the header is cream, and when scrolling the header sticks and stays the same colour. 

i need help to fix the header so it turns cream on the home page when scrolling. 

also when i press the menu from the home page, the header also stays transparent it doesnt turn cream, im not sure how to fix that. i have added some coding to my theme.liquid which made my header transparent, and another code to make my sticky header cream.

 

hopefully ive explained this right and if anyone could help that would be great!

Accepted Solution (1)

Anshul_arora
Navigator
429 122 87

This is an accepted solution.

Hello @jhoj ,

I understand you are looking to change the background color on scroll from transparent to #dfd1c5

Please add this code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.scrolled-past-header * {
background: #dfd1c5 !important;
}

</style>

[Please feel free to change the background color as per your need.]

Output will be like this -> https://prnt.sc/NIchuqHCA4De , https://prnt.sc/bT9Hw5LbEsYy

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 5 (5)

BrainStation23
Shopify Partner
344 54 52

HI, @jhoj  can you share you'r store URL so that we can look at it?

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

Anshul_arora
Navigator
429 122 87

This is an accepted solution.

Hello @jhoj ,

I understand you are looking to change the background color on scroll from transparent to #dfd1c5

Please add this code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.scrolled-past-header * {
background: #dfd1c5 !important;
}

</style>

[Please feel free to change the background color as per your need.]

Output will be like this -> https://prnt.sc/NIchuqHCA4De , https://prnt.sc/bT9Hw5LbEsYy

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
jhoj
Tourist
8 0 1

it worked! thank you so much

jhoj
Tourist
8 0 1

im  having one last issue, when on the theme editor, if i press the menu on desktop mode, the header stays transparent rather than changing to the dfd1c5 colour

jhoj
Tourist
8 0 1

even on the mobile version