I want to add a sticky header on Desktop version, ONLY on Debut theme

Store Design
1

Hello, basically I followed this article on adding the code to Debut theme. It all worked and I did have the sticky header, but I wanted the sticky header only to function on the Desktop version and not on Mobile version because it isn’t necessary for it to take a lot of space on the mobile version. Could you send me a code which I should paste in the theme.scss.liquid and theme.js.

Thanks!

2

@dutke33

Please add the following code at the bottom of your assets/theme.scss.liquid or theme.css file.

#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;
}
}

Please add the following code at the bottom of your assets/theme.js file.

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

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

The header is still sticky on the phone devices, too. Is there a way to make it visible only on Desktop? Thanks

PS the phone I use to test this is Samsung Galaxy s21 ultra, if that could be the issue maybe?

4

@dmwwebartisan

The header is still sticky on the phone devices, too. Is there a way to make it visible only on Desktop? Thanks

PS the phone I use to test this is Samsung Galaxy s21 ultra, if that could be the issue maybe?