How to change header from transparent, back to a normal filled background when scrolling

404virtues · ‎07-08-2024

Hi there,

I would like to change my sticky header on the homepage to transparent, but when scrolling down it should go back to it's normal background color which is black.

I would prefer this function to only effect the homepage, and for every other page it should remain it's normal background color (black) without any transparency.

I also prefer the header to shrink when scrolling down as per theme settings.

Dan-From-Ryviu · ‎07-08-2024

Hi @404virtues

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

{% if template == 'index' %}
<style>
sticky-header { background: unset !important; }
.scrolled-past-header sticky-header { background: #121212 !important; }
#MainContent { margin-top: -61px; }
@media (max-width: 749px) {
#MainContent { margin-top: -59px !important; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

View solution in original post

BSSCommerce-HDL · ‎07-08-2024

Hi @404virtues,
Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

404virtues · ‎07-08-2024

Oh hey,

Here it is.

https://404virtues.com/

BSSCommerce-HDL · ‎07-08-2024

Hi @404virtues,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
<style>
  sticky-header.header-wrapper {
    position: fixed;
    width: 100%;
    max-width: 100%;
    top: 38px;
    background-color: transparent;
}

body:has(.scrolled-past-header) sticky-header.header-wrapper {
    top: 0;
    background-color: #121212 !important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

AnneLuo · ‎07-08-2024

Hi, @404virtues

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me

Buy Me A Coffee ☕

404virtues · ‎07-08-2024

Here it is. ✌️

https://404virtues.com/

AnneLuo · ‎07-08-2024

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

{% if template.name == 'index' %}
<style>
  sticky-header.header-wrapper {
    position: fixed;
    background-color: transparent !important;
}

.scrolled-past-header sticky-header.header-wrapper {
    top: 0;
    background-color: #121212 !important;
}
</style>
{% endif %}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me

Buy Me A Coffee ☕

404virtues · ‎07-08-2024

I tried your code, but it split the header in half for some reason.

Thanks for the help though!

Dan-From-Ryviu · ‎07-08-2024

Hi @404virtues

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

{% if template == 'index' %}
<style>
sticky-header { background: unset !important; }
.scrolled-past-header sticky-header { background: #121212 !important; }
#MainContent { margin-top: -61px; }
@media (max-width: 749px) {
#MainContent { margin-top: -59px !important; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

404virtues · ‎07-08-2024

Dan you're amazing!

Dan-From-Ryviu · ‎07-08-2024

Thank you so much for the coffee! You're very welcome.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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.

How to change header from transparent, back to a normal filled background when scrolling