Debut Sticky Header covering product images on Product Page

Store Design
1

Hi - Can someone please assist with this issue. For some reason whenever I select a product the sticky header that I have in my theme covers the top portion of my product images as well as the product name and I am not able to scroll up. See the picture below for example:

HatsGalore_0-1659338673466.png
HatsGalore_0-1659338673466.png2239Ă—1222 577 KB

The same happens on the homepage, but instead of product images being covered its the Text I have at th top of the page.

HatsGalore_1-1659338783156.png
HatsGalore_1-1659338783156.png2247Ă—1198 599 KB

The store link is here: https://shophatsgalore.com/

2

@HatsGalore

.grid.product-single.product-single--medium-media {
    padding-top: 96px !important;
}

Add this code in the bottom of theme.css file,

Let me, know if you have any more issue,

Thank you.

3

Thanks @devtalk this fixed the issue on the product page. I am still noticing the issue on the homepage though, with the text “Shop Our Latest Selections” being covered by the sticky header. Is there a way to fix this on the homepage too?

Thanks again, I really do appreciate your help!

4

@HatsGalore

div#shopify-section-collection .index-section {
    padding-top: 120px !important;
    border-top: 0;
}

Try out this code.

5

That didn’t work :disappointed_face:

6

This is the header text that’s being covered up, from mobile view

E5102A26-7057-40E0-8E90-86C8F0855D19.png
E5102A26-7057-40E0-8E90-86C8F0855D19.png1170Ă—2532 352 KB

7

@HatsGalore

div#shopify-section-collection{
    padding-top: 120px !important;
    border-top: 0;
}

try this one.

8

That worked! Thank you so much I’m happy to finally put this issue behind me.. You are the best :+1:

9

@HatsGalore
let, me know if you need any more help,
we are happy to help you.