Transparent header home page only (and some more)

dodo06 · ‎10-17-2024

This is going to be a big request but i need help with:

1. making my header transparent on home page only and turning header text and icons white.

2. making the sticky header appear when scrolling up (white background with black text)
3. making the sticky header disapear when scrolling down
https://795000-4b.myshopify.com/

Dan-From-Ryviu · ‎10-17-2024

Hi @dodo06

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

{% if template == 'index' %}
<style>
.section-header .list-menu__item,
.section-header .header__icon { color: #fff; }
.section-header .header-wrapper { background: transparent; }
.section-header .header-wrapper .header__heading-link.media img {   
    filter: brightness(0) invert(1); 
}
#MainContent { margin-top: -101px; }
body .section-header.scrolled-past-header .list-menu__item,
body .section-header.scrolled-past-header .header__icon { color: #000; }
body .section-header.scrolled-past-header .header-wrapper { background: #fff; }
body .section-header.scrolled-past-header .header-wrapper .header__heading-link.media img {   
    filter: brightness(1) invert(0); 
}
@media (max-width: 749px) {
body #MainContent { margin-top: -62px; }
}
</style>
{% endif %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- 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.

View solution in original post

Dan-From-Ryviu · ‎10-17-2024

Hi @dodo06

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

{% if template == 'index' %}
<style>
.section-header .list-menu__item,
.section-header .header__icon { color: #fff; }
.section-header .header-wrapper { background: transparent; }
.section-header .header-wrapper .header__heading-link.media img {   
    filter: brightness(0) invert(1); 
}
#MainContent { margin-top: -101px; }
body .section-header.scrolled-past-header .list-menu__item,
body .section-header.scrolled-past-header .header__icon { color: #000; }
body .section-header.scrolled-past-header .header-wrapper { background: #fff; }
body .section-header.scrolled-past-header .header-wrapper .header__heading-link.media img {   
    filter: brightness(1) invert(0); 
}
@media (max-width: 749px) {
body #MainContent { margin-top: -62px; }
}
</style>
{% endif %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- 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.

dodo06 · ‎10-18-2024

no flipping way ive been trying to do that the whole day, you are a legend,

but i have one last problem with my store, add to cart button is not working, i would appreciate if you could help me

Dan-From-Ryviu · ‎10-18-2024

Let me check

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- 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.

Dan-From-Ryviu · ‎10-18-2024

There is an issue with your theme script, and script is encrypted, so I recommend you contact theme or app support so they can help you.

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- 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.

dodo06 · ‎10-18-2024

I am unable to contact them, could you please try to fix it? i will buy you coffe, please:/

Transparent header home page only (and some more)

Transparent header home page only (and some more)

Community Blog Articles