Solved

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

GiudFabri123
Tourist
12 0 1

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.

 

 

Accepted Solution (1)

Moeed
Shopify Partner
3869 976 1220

This is an 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:

Moeed_0-1718088523475.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. ❤️

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
3869 976 1220

This is an 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:

Moeed_0-1718088523475.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. ❤️
GiudFabri123
Tourist
12 0 1

Thank you! It worked.

 

 

Moeed
Shopify Partner
3869 976 1220

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.

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

Rahul_dhiman
Shopify Expert
93 16 32

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.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
GiudFabri123
Tourist
12 0 1

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
Shopify Expert
93 16 32

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
GiudFabri123
Tourist
12 0 1

yes pls! 

Rahul_dhiman
Shopify Expert
93 16 32

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here