Transparent header, to white on scroll in theme Refresh

stride · ‎12-22-2024

I would like my header to be transparent with white text on my homepage. On scroll it should then transfrom into white header with black text. I'm using a Shopify theme - Refresh. I've tried adding css and java script before but it didn't work properly.

stride · ‎12-22-2024

it's stridedrinks.com

Bundler-Manuel · ‎12-22-2024

Hello @stride Try out the steps and code in the marked reply here https://community.shopify.com/c/shopify-design/how-can-i-create-a-transparent-header-on-the-refresh-...

this should be able to make your header transparent as you’d like.

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

Dan-From-Ryviu · ‎12-23-2024

Hi @stride

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit theme

{% if template == 'index' %}
<style>
.section-header .header-wrapper {
background: transparent;
}
.section-header .header__icon .svg-wrapper,
.section-header header .header__menu-item span {
color: #fff;
}
.section-header .header__heading-logo { 
filter: invert(1); 
}
html .section-header.scrolled-past-header .header-wrapper {
background: #fff;
}
html .section-header.scrolled-past-header .header__icon .svg-wrapper,
html .section-header.scrolled-past-header header .header__menu-item span {
color: #141414;
}
html .section-header.scrolled-past-header .header__heading-logo { 
filter: invert(0); 
}
#MainContent { margin-top: -66px; }
@media (max-width:749px) { 
.section-header .header__icon--menu .icon {
color: #fff;
}
html .section-header.scrolled-past-header .header__icon--menu .icon {
color: #141414;
}
html #shopify-section-sections--22799632531782__header header {
background-color: transparent;
}
html #MainContent {
    margin-top: -63px;
}
}
</style>
{% endif %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

stride · ‎12-23-2024

Hi! Thanks for the help, I've tried adding the code as you said but it's still not working. The photos you sent are a perfect example of how it should work though.

Dan-From-Ryviu · ‎12-23-2024

Where did you add the code? Did you save file after adding code?

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

stride · ‎12-24-2024

Yes, i've saved it. I've added it like this

Dan-From-Ryviu · ‎12-24-2024

Hi, cannot see the code in the HTML of your site. Make sure you added code to theme.liquid file of the current theme.

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Transparent header, to white on scroll in theme Refresh

Transparent header, to white on scroll in theme Refresh

Community Blog Articles