Shopify themes, liquid, logos, and UX
I need to make sticky transparent header black if scrolled down
My store - corbie.store
Solved! Go to the solution
This is an accepted solution.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
header__logo-image--transparent {
position: absolute !important;
top: -70px !important;
}
image-banner.content-over-media.content-over-media--lg.full-bleed.text-custom {
position: relative !important;
margin-top: 7rem !important !important;
}
.header__wrapper {
background: black !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hi @Somehow999 I see i worked
Yes but it's gray on any other page
Hi @Somehow999
I see it already transparent and black background when scrolling down.
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Hi @Somehow999 Do you want the header like this across the entire website?
Yes man
This is an accepted solution.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
header__logo-image--transparent {
position: absolute !important;
top: -70px !important;
}
image-banner.content-over-media.content-over-media--lg.full-bleed.text-custom {
position: relative !important;
margin-top: 7rem !important !important;
}
.header__wrapper {
background: black !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Thank you so much
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025