Issue with sticky header on debut theme

[IKBs]

Hi I hope someone can help me with this

The issue I am having is the sticky header covers the top of my products on the page. This only happens on the phone version and on on my product pages, all other pages are fine.

Any help would be much appreciated!

https://inspiringkidsbooks.com/

 

[JHKCreate]

Hi @IKBs ,

Do you want it to disappear when you scroll down then?

[IKBs]

I’d like for the full picture to be displayed. It appear the header is overlapping it

[AstroMerch]

I have the same problem. Did you ever solve this? My section is cut off by the sticky header.

[AstroMerch]

I figured it out. Under theme.js add this:

/*This is shopify header css to make sticky*/

#shopify-section-header {
position: fixed;
z-index:1000;
left:0;
right:0;
background-color: {{ settings.color_body_bg }};

}

#PageContainer {
padding-top: 85px; /*This adds space between navigation and container,adjust number to match your ideal spacing*/
}

@media screen and (max-width: 749px) {
#PageContainer {
top: 75px; /*For mobile view, use top not padding-top or margin-top*/

}