Product grid images on mobile header - Debut theme

Store Design
1

Hello!

I am using Debut theme for my website, and I have set the sticky header and also edited the product-card-grid.liquid to add the hover effect to show the 2nd product grid images on my collection page and home page, everything looks fine but the product grid images are shown on top of/hiding the header on mobile when I scroll down the pages, could anyone help and see if it can be fixed to make the header on top of the product grid images?

Thank you very much!

Website: littleglamjewelry.com

on desktop - looks fine

algoy_0-1629573912013.png
algoy_0-1629573912013.png947×561 140 KB

on mobile - the images are hiding the header

algoy_1-1629573964373.png
algoy_1-1629573964373.png673×865 201 KB

1 Like
2

@algoy

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

hello @algoy

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 750px){
#shopify-section-header {
    z-index: 10000000000;
    top: 0;
}
 }
2 Likes
4

@algoy

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#shopify-section-header {z-index: 99999999999;}
5

It works, thank you @Kinjaldavra !

Best regards,

@algoy

6

@KetanKumar , thank you for your help, we got the solution.

Best regards,

@algoy