I just made a sticky header in my Debut theme ,but there a some bug in the product page

Technical Q&A
1

I just made a sticky header in my Debut theme ,but there a some bug in the product page…

here how I did it from :

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td-p/518018

but the product title is cover by the header, even I scroll up to the top

Untitled-1erereee.jpg
Untitled-1erereee.jpg1920×920 145 KB

https://yorozuyadecor.com/products/electric-automatic-yogurt-maker

would be very appreciated if anyone can help, thank you very much

2
  1. In your Shopify Admin go to online store > themes > actions > edit code

add this jquery code to javascript file

$(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 400) {
    $('#shopify-section-header').css('position', 'fixed');
  } else {
    $('#shopify-section-header').css('position', 'static');
  }
});

and this is for CSS below or change the ##shopify-section-header from fixed to static otherwise enter this code at the end of css file

#shopify-section-header {
position: static;
}
3

I dont have javascript to choose

1 Like
4

can you tell me where exactly location I need to put in? I’m not good a coding haha

5

go to theme > edit code and then find theme.js file and put it at the end the javascript code and for css find theme.css or theme.scss and add css code at very bottom

6

Sorry but this solution does not work for me

7

thank you for sharing, but this one doesn’t work on mine as well

8

please replace javascript code with this in theme.js

jQuery(document).ready(function($) {
    $(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 400) {
    $('#shopify-section-header').css('position', 'fixed');
  } else {
    $('#shopify-section-header').css('position', 'static');
  }
});
});
9

I have tested new code and its working!

10

ve just try on the new one, I can see the title now, but the header is not fixed anymore.

11

it is fixed try to scroll at least 400 pixel or you can lower this number to stick earlier in your javascript code change 400 to 100 and it will stick faster

12

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
    #PageContainer {
    padding-top: 80px;
    }
    Hope it helps!
13

Thank you so much, It’s worked