Make header background transparent and change to white on scroll for Craft Theme

[GiudFabri123]

We found other responses about this and have tried to apply the codes that were provided, however it was not successful. 

Is there a different coding for Craft Theme ?our link is below if that helps.

https://www.scanditure.com/

We need the header background to be transparent when you are on the main page, and when you scroll it changes to white background so the Logo and menu stands out.

The other issue we are having is on the mobile version, the announcement bar is hiding the logo + menu on the main page and when you head to other pages on the web it all looks fine. so the problem seems to be on the main page.

[Moeed · Accepted solution]

Hey @GiudFabri123 

To fix your header transparent issue, it's just not a CSS issue only, it would require some further custom coding too so if you're not familiar with coding then I suggest you to hire a Shopify developer who can help you out.

To fix your announcement bar issue which is hiding the header in the mobile version,

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>
@media screen and (max-width: 767px) {
.header-wrapper {
    padding-top: 45px;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[GiudFabri123]

Thank you! It worked.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Rahul_dhiman]

Hello @GiudFabri123 
Your issue of header background to be transparent when you are on the main page is seems to be solved.

For mobile - check the below details-

Go to Online Store--------->Edit Code---------> Find theme.liquid file/base.css 
and add the below below.

header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social {
    height: 100px;
}

let me know if the issue is solved.

[GiudFabri123]

Hi Rahul,

yes, it is currently transparent at the moment but i need it to to change to a white background once you start scrolling.
Would you know how to do that ? 

[Rahul_dhiman]

@GiudFabri123  Sure, i have checked and this would require coding to change the background color once you start scrolling.
I can help you to code this, please let me know.

[GiudFabri123]

yes pls! 

[Rahul_dhiman]

@GiudFabri123  I have sent you message in inbox please check.