Shopify | Debut theme static header bounce

0
votes

I'm editing the Debut theme on Shopify. I wanted to make the header static so I found this tutorial here: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#M132407

Everything is working as intended until after all the content is loaded, at which point it "bounces" in order to position the main content under the header. I tried to find the cause, and I realized that removing the $(window).on("load", headerSize); from the code below stops it, but does not reposition it. I have no clue how to use JavaScript and I assume I have to set a shorter animation or some kind of timer on the existing code in order to load the page instantly, or without the user noticing the bounce.

JavaScript:

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
1
javascriptheaderthemesshopify

1 Answers

0
votes

The easiest way to achive what you want is to add the following at the bottom of your css file:

#shopify-section-header {
  z-index: 999999;
  position:fixed;
}