Shopify themes, liquid, logos, and UX
Hello all!
I am trying to make my site's (https://thisiscalea.com/) header & banner ad match the behavior on this site: https://www.cashmerecactus.com/.
Desired Features:
* Header is below banner ad, and then fixed to top on scrolling
* Header is transparent, and then opaque on scrolling
* header overlays image on page load
* I am using Craft theme, if it is relevant.
Thanks in advance! I have been trying to sort this out myself for too long, and would appreciate the support ❤️
@Calea Hey, thanks for posting here.
you have only 4 points related to the header, but it is a time-consuming task let me first work on it then let you know.
Hi @Calea,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.section-header.shopify-section-group-header-group {
position: fixed !important;
width: 100% !important;
top: 40px !important;
}
.header-wrapper {
--gradient-background: transparent;
--color-foreground: 255, 255, 255;
}
Thanks so much! This is almost perfect.
The header is now transparent, but I need it to turn opaque again when you scroll down the page.
If you go to my site, thisiscalea.com, you can see that the header remains transparent after scrolling and hard to read/use.
Hi @Calea,
Please change code:
.section-header.shopify-section-group-header-group:not(.scrolled-past-header) {
position: fixed !important;
width: 100% !important;
top: 40px !important;
}
.section-header.shopify-section-group-header-group:not(.scrolled-past-header) .header-wrapper {
--gradient-background: transparent;
--color-foreground: 255, 255, 255;
}
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