Shopify themes, liquid, logos, and UX
How can I make my header transparent, and have my home page (only this page) banner bleed into the header. And how can I then have it so when scrolling down, the header becomes white and my logo inverts to black?
To clarify;
When first landing on the home page:
When scrolling down:
URL: chilledespresso.com
First remove gradient and color-schema from sticky-header then do this code
sticky-header {
background: transparent;
position: absolute;
width: 100%;
border: none;
}
.section-header.scrolled-past-header sticky-header {
background-color: white !important;
}
we cannot change the logo color becaue you have used image so but you can use other image and change the display none to block when it scroll just like background change.
What code would I put if I was to use a different logo colour after scrolling
when you have to add a another image of logo so write this code
.section-header .second-logo {
display: none;
}
.section-header.scrolled-past-header .second-logo {
display: inline-block;
}
.section-header.scrolled-past-header .header__heading-logo-wrapper {
display: none;
}
1. How to add second logo
2. Can I make all of this so it only works on my home page, &
3. How can I make the text white and have it go black on scroll ( like the original query )
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025