Make Header on Home page transparent and when scroll down turn to solid white.

Tom202
Excursionist
16 0 11

Hi Team, I need you kin help again - I tried asking around here already, but no positive result yet.

 

I go crazy in trying to make the Header on the homepage (only on the homepage) transparent and when scrolling down, it should turn to solid white. I tried already all solutions here in the board, but nothing helped so far 😞

 

Any ideas here? 

 

The closest I got, was to add in theme.liquid additional css to make the header transparent, but it won't turn white when scrolling down.

 

Really, any feedback here highly appreciated. 

 

My site is: www.bienenblatt.de 

 

Thanks a lot and have y'all a great day!

Tom

Replies 7 (7)

Moeed
Shopify Partner
3672 928 1159

Hey @Tom202 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: transparent !important;
}
main#MainContent {
    margin-top: -125px;
}
</style>
{% endif %}

RESULT:

Moeed_0-1693910878429.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Tom202
Excursionist
16 0 11

Hi @Moeed , thanks a lot for your help. It made the header transparent, but when I scoll down, it remains transparent. The header should become solide white, once I scroll down the Hero image.

 

 

Tom202_1-1693911747034.png

 

Moeed
Shopify Partner
3672 928 1159

Hey @Tom202 

 

To make the header white on scroll is possible, but it requires code customization and is not only possible via CSS. It requires Liquid and JS coding. If you're not familiar with coding then I highly suggest you to hire a Shopify developer who can help you out in accomplishing this task.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Tom202
Excursionist
16 0 11

Thanks a lot. I now played around a bit with Javascript and it works perfectly fine.

 

Here, however one small problem: when I scroll up, the header turns white (good). The header is 100% full width everywhere, except for my hero image and other full width sections (e.g. my liquid video section at the botton).

 

Tom202_0-1693919590462.png

 

Any idea, how I can make the header full width all the time?

 

Moeed
Shopify Partner
3672 928 1159

Hey @Tom202 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

<style>
.header.white-bg {
    max-width: 100%;
}
</style>

 

RESULT:

Moeed_0-1693919803062.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Tom202
Excursionist
16 0 11

Thanks @Moeed for your quick turnaroud. That worked smoothly.

 

I have one bug left, I can not find. Namely, when I am in the mobile version with the transparent header, and I touch on the Menu bar icon, the menu opens, but as you can see the menu "header" remains transparent, but should be white.

 

 

Tom202_0-1693920471962.png 

 

Any idea on how to fix that on the mobile version :)?

 

 

Sam575
Visitor
1 0 0

Hello! I see you fixed this issue on the mobile version, I'm struggling with the same issue. Would you be so kind and provide the solution? 🙂