How to make my Header Transparent on Home Page?

LSAccounting · ‎07-18-2024

I have tried using this video: https://www.youtube.com/watch?v=4qA3gNt5wCQ&t=1s

But this has made my header transparent on every page.

I would like my header transparent only on my home page where I have the video banner.

My page is:

https://elnisfinancials.myshopify.com/

By L&S Team

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

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

{% if template == 'index' %}
<style>
.section-header .header-wrapper {
    background: transparent;
}
#MainContent { margin-top: -226px; } 
@media (max-width: 749px) {
#MainContent { 
margin-top: -206px !important; 
z-index: -1;
} 
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Made4uo-Ribe · ‎07-18-2024

Hi @LSAccounting

Its password protected. You need to add this code. Example.

{% if template == 'index' %}
<style>
.header {
    background: transparent;
}
</style>
{% endif %}

And Save.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

LSAccounting · ‎07-18-2024

Hi, @Made4uo-Ribe

Where abouts should I add this?

By L&S Team

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

Hi @LSAccounting

Your store has password protected

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

LSAccounting · ‎07-18-2024

@Dan-From-Ryviu ,

Password is: elnis

By L&S Team

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

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

{% if template == 'index' %}
<style>
.section-header .header-wrapper {
    background: transparent;
}
#MainContent { margin-top: -226px; } 
@media (max-width: 749px) {
#MainContent { 
margin-top: -206px !important; 
z-index: -1;
} 
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How to make my Header Transparent on Home Page?

How to make my Header Transparent on Home Page?

Community Blog Articles