How can I fix a sticky header issue on the mobile version of Debut theme?

Technical Q&A
1

Hi,

I have made some changes to make debut theme header as a sticky header and it works fine on desktop but on mobile version it’s messed up and revert to the default one. I would like to change that, can someone help me to change the header as the same version as desktop version.

This is what I code

on theme.css :

#SearchDrawer {
  z-index:1001;
}
#shopify-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}
#PageContainer {
  padding-top: 80px;
}
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}

And I also edited theme.js:

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}
$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

My store url: godzhand.myshopify.com

I have been stuck for a while so any help is really appreciated, thank you!