Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
HI, @jhoj can you share you'r store URL so that we can look at it?
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.
it worked! thank you so much
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
even on the mobile version
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024