Issue with sticky header on debut theme

IKBs
Tourist
5 0 2

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.

 

IMG_7518.PNG

 

Any help would be much appreciated!

 

https://inspiringkidsbooks.com/

JHKCreate
Shopify Partner
2052 333 447

Hi @IKBs ,

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

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
IKBs
Tourist
5 0 2
I’d like for the full picture to be displayed. It appear the header is overlapping it
0 Likes
AstroMerch
New Member
2 0 0

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

0 Likes
AstroMerch
New Member
2 0 0

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*/

}

0 Likes