How to fix a static header overlapping on mobile?

Store Design
1

Hello,

My static header overlaps the top of each page and cuts off a part of it. This is only on mobile.

Please advise.

Thanks

Screenshot_2022-04-06-11-58-45-68_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2022-04-06-11-58-45-68_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×783 46.2 KB

Screenshot_2022-04-06-11-58-07-55_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2022-04-06-11-58-07-55_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×740 59.4 KB

2

Hi @rfc_Char
I’m happy to be able to help you and thank you for your question.
Please share your store URL, page URL, and also password (if your store has one) so we can help you.

3

Thank you for your help. The website is reFORESTCollection Any advice or assistance would most appreciated.

rfc_Char

4

hi @rfc_Char I see the header works normally.
But if you want to remove sticky you can try to add this code to below of the file theme.css

@media screen and (max-width: 749px){
#shopify-section-header {
position: initial!important;
}
#PageContainer {
    padding-top: 0!important;
}
}
5

Hello Micheal,

Thank you for checking but if you check on mobile the header overlaps the collection image. It covers the top portion and makes the alignment off. I would like it to not cover the top part of image at top of page.

Please advise.

Char

6

I think the issue is actually with the shipping bar. When the shipping bar loads it pushes down the header to overlap the image. Thoughts?