Transparent header background problem on product page and all other pages except main menu

[AtelierDuir]

Hello,

I recently added a transparent header to my website. I'm very happy with the result except for the mobile version.. When I go to my policies I see that the header is in overlap with the text (as shown on picture). I'm clueless, I've tried everything so far. I'm going live with my webshop on the 25th of September. Can someone help me 🙂

[Moeed · Accepted solution]

Hey @AtelierDuir 

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) {
.shopify-policy__container {
    padding-top: 70px !important;
}

}
</style>

RESULT:

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

Best Regards,
Moeed

[Moeed]

Hey @AtelierDuir 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[AtelierDuir]

Hello Moeed,

Website: https://atelierduir.com/

Password:421918!

Thank you!

[Moeed · Accepted solution]

Hey @AtelierDuir 

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) {
.shopify-policy__container {
    padding-top: 70px !important;
}

}
</style>

RESULT:

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

Best Regards,
Moeed

[AtelierDuir]

Thank you so much! 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.

[AtelierDuir]

Hello Moeed,

I have another question i would like to ask you. It is the same question as before but for two different pages.

When I go to "your cart" I see that the header is in overlap with the text (as shown on picture). The same for my new collection.

The problem is just on my phone, on the laptop everything works fine.

I hope you can help me again!

[Moeed · Accepted solution]

Hey @AtelierDuir 

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) {
cart-items {
    padding-top: 90px !important;
}
.collection-hero__text-wrapper {
    padding-top: 55px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed