LOCKING THE LOGO BANNER HEADER WHILE SCROLLING DOWN DEBUT THEME

recess-concept
Tourist
11 0 1

Hello!

 

I'd like to lock my logo banner/ header while I scroll down on my page. That way the logo and head banner always shows no matter where you are on the site.

 

Any advise? Thanks!!!

0 Likes
Guleria
Shopify Partner
1781 377 532

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.css-> paste bellow code in bottom of file

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

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
/* Sticky Header ends here */

 

3. Asset->theme.js-> paste bellow code in bottom of file

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

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
/* Sticky Header ends here */

 

If you did other customization then maybe you have to adjust it.

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
Solutions1
Trailblazer
122 12 29

Hello Recess Concept!

From your Shopify admin, go to Online Store > Themes.
Locate your Debut theme and then click Actions > Edit code.
In the Assets folder, open your theme.scss.liquid file.

03-39-badae-sysyp
Go to the very bottom of this file and paste the following code:

#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;
}
}
In the same Assets folder, click to open your theme.js file.
Go to the very bottom of this file and paste the following code:

 

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
Save the file by using the button on the top right-hand side.
Refresh your online store page and verify that the sticky header is working correctly!

 

let me know this fix your issue or may be require more coding

Thanks

Solution1

0 Likes
recess-concept
Tourist
11 0 1

Hey! Sorry it did not work.

0 Likes
recess-concept
Tourist
11 0 1

Here is the URL: https://recess-concept.com

Password: dopeoy 

 

0 Likes
Guleria
Shopify Partner
1781 377 532

Try to follow this example 

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
recess-concept
Tourist
11 0 1

Hi can you try to check the URL and suggest why your doing didn't work

0 Likes
recess-concept
Tourist
11 0 1

Thank you, I tried but it works very badly on my page and I don't know how to customised it well. I'd like to just lock the existing one on my website and not to create a new banner from scratch as the example suggest.

Thank you! If you can suggest a simpler solution that'd be great.

0 Likes