Transparent header only on homepage (mobile)

Reminder · ‎07-15-2024

Hi,

I have a transparent header enabled on only the homepage. This works on the desktop but when I view my store on mobile view the page titels are covering my logo in the header. Does someone has a solution to fix this? Thanks alot!

Ugurcan · ‎07-15-2024

Sounds like a z-index issue. You need to increase z-index for your header, which may fix the problem.

Pasilobus | eCommerce Experts, Shopify Apps & Development since 2015 -- www.pasilobus.com

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

Hi @Reminder

Could you share your store URL so I can check?

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

Reminder · ‎07-16-2024

https://reminder-clothing.com/

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

Hi @Reminder

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

{% if template == 'index' %}
<style>
.header-wrapper { background: transparent; }
#MainContent { margin-top: -127px; }
@media (max-width: 749px) {
#MainContent { margin-top: -83px !important; }
}
</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.

JasmeetVT14313 · ‎07-17-2024

Hi @Reminder
Can you try adding the below code to theme.liquid file and remove the previously added code for ".header-wrapper"
Let me know if you still have any concerns

{% if template contains 'index' %}
<style>
.header-wrapper {
    background: transparent;
    position: absolute;
    width: 100%;
    top: 0px;
}
</style>
{% endif %}

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

Reminder · ‎07-17-2024

It's still overlapping...

JasmeetVT14313 · ‎07-19-2024

Hi @Reminder
Is it possible for you to provide me with collaborator access? I'll do it for you.
Also, it seems that your store is password protected right now. Please share storefront password as well.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

Transparent header only on homepage (mobile)

Transparent header only on homepage (mobile)

Community Blog Articles