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

ausheabeauty
New Member
3 0 0

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

0 Likes
Guleria
Shopify Partner
1696 352 490

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
0 Likes

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

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
ausheabeauty
New Member
3 0 0

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

0 Likes
ausheabeauty
New Member
3 0 0

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

0 Likes