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!!!

Replies 7 (7)
Guleria
Shopify Partner
2011 426 621

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
Buy me a coffee My PayPal
Try GEMPAGES page builder.
Solutions1
Trailblazer
152 12 23

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

recess-concept
Tourist
11 0 1

Hey! Sorry it did not work.

recess-concept
Tourist
11 0 1

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

Password: dopeoy 

 

🙂

Guleria
Shopify Partner
2011 426 621

Try to follow this example 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
recess-concept
Tourist
11 0 1

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

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.