Transparent Fixed Header | below banner ad | Opacity Changes On Scroll | Craft Theme

Transparent Fixed Header | below banner ad | Opacity Changes On Scroll | Craft Theme

Calea
Visitor
2 0 1

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 ❤️ 

Replies 4 (4)

ProtoMan44
Shopify Partner
700 57 111

@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.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

namphan
Shopify Partner
2263 296 332

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Calea
Visitor
2 0 1

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.

namphan
Shopify Partner
2263 296 332

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com