Re: 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 %}

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

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 %}

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

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

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

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.

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

dodo06 · ‎10-18-2024

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

Re: Transparent header home page only (and some more)

Transparent header home page only (and some more)

Community Blog Articles