How to Make Header Fixed/Sticky in Debut Theme without a theme.scss.liquid file

Technical Q&A
1

I’ve read a couple of posts where they resolution to have a sticky/fixed header included using a file named theme.scss.liquid where you then implement a code to make the header sticky throughout the website. Is this possible to do without using a theme.scss.liquid file? I do not have that asset because it seems that it is no longer supported by shopify. PLEASE HELP!

Screen Shot 2021-07-23 at 8.45.20 PM.png
Screen Shot 2021-07-23 at 8.45.20 PM.png496×672 36.8 KB

2

Hello @ausheabeauty ,

Step 1:

  1. Go to Online Store->Theme->Edit code
  2. Asset-> theme.css-> paste bellow code in bottom of file
.stickHeader{
  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 }};
}

Step 2:

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.js paste bellow code in bottom of file
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
   if (scroll >= 10) {
        $("#shopify-section-header").addClass("stickHeader");
    } else {
        $("#shopify-section-header").removeClass("stickHeader");
    }
});

Thanks

3

You can go to theme.css file, it’s same as theme.scss.liquid.
Hope it clear to you.

4

Unfortunately, this didn’t work for me. Can I please get assistance.

5

Unfortunately, this didn’t work for me. Can I please get assistance.