Sticky/Fixed Header and Navigation for Debut Theme

Tourist
11 2 2

I should add that I am also seeing the following error in my browser's debugger:

 

$(window).on("resize", $.debounce(500, headerSize)); <<<<<<<<< [$.debounce is not a function.]

 

Is there some library I'm missing here? I've copied the code exactly.

 

Thank you!

0 Likes
Shopify Expert
39 4 5

hi @SeanP 

We seen all the comments and code , but all the codes may be not full-fill your needs .

We provide you a very simple code for "Debut" theme .

Any way here the code :)

 

 <script>
      //announcement bar 
      $("[data-section-id = header]").css({"position":"fixed","z-index":"99999","width":"100%","top":0,"background-color":"#f8f8f8"});
      var header_height = $("[data-section-id = header]").height();
      $("#PageContainer").css("margin-top",header_height);
  </script>

Before you add the code please remove all the previous code what you use for it .

 

After remove Previous code, you add our code before the closing </body> tag.

Please see the ref: screenshot

sticky-header.png

This code is tested. Here the preview link https://vuj4ixbxw35vpnro-29765088.shopifypreview.com

 

Thank you 

0 Likes
Highlighted
Shopify Expert
39 4 5

hi @SeanP 

We seen all the comments and code , but all the codes may be not full-fill your needs .

We provide you a very simple code for "Debut" theme .

Any way here the code :)

 

 <script>
      //announcement bar 
      $("[data-section-id = header]").css({"position":"fixed","z-index":"99999","width":"100%","top":0,"background-color":"#f8f8f8"});
      var header_height = $("[data-section-id = header]").height();
      $("#PageContainer").css("margin-top",header_height);
  </script>

Before you add the code please remove all the previous code what you use for it .

 

After remove Previous code, you add our code before the closing </body> tag.

Please see the ref: screenshot

sticky-header.png

This code is tested. Here the preview link https://vuj4ixbxw35vpnro-29765088.shopifypreview.com

 

Thank you 

1 Like
Tourist
11 2 2

I am using Minimal theme and the code above did not seem to work properly for me, although I do see that it works well on the sample site provided. So take that as you will. I also prefer the slight drop shadow that Sean's original code gives to the header, so I wanted to find a way to make the original code work with my theme.

 

Here is a solution I came up for Sean's / Shopify's sticky header code that works on my site. I'm not a professional developer, so buyer beware. 

 

1. In the theme.js code, replace

$('#PageContainer').css('padding-top', $headerHeight);

with

$('.main-content').css('padding-top', $headerHeight);

2. In timber.scss.liquid, locate

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
}

and add a line for padding-top with some hard-coded placeholder pixels

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
padding-top: 180px; }

Mess around with the "180px" number to find a padding that works for your site/header. This is just a placeholder to make sure the content loads immediately some place below the header before the javascript has a chance to kick in and calculate the actual padding required by your specific header. Before I added this second step, the site would immediately load with content behind the header and then after a second or two the content would be pushed down to the correct position. By making both these changes, the content will load in a way that is not disruptive to the user. I'm assuming it's not good to have such a hard-coded pixel value for padding-top, so this is a hybrid solution that holds the page content in roughly the right place while javascript comes up behind and changes it into a more precise number in the spirit of adaptivity.

 

Again, I'm not a professional developer and maybe a professional developer can offer some advice or improvements. But so far this is working well for me on both desktop and mobile.

1 Like
Shopify Expert
39 4 5

hi


@wmwm wrote:

I am using Minimal theme and the code above did not seem to work properly for me, although I do see that it works well on the sample site provided. So take that as you will. I also prefer the slight drop shadow that Sean's original code gives to the header, so I wanted to find a way to make the original code work with my theme.

 

Here is a solution I came up for Sean's / Shopify's sticky header code that works on my site. I'm not a professional developer, so buyer beware. 

 

1. In the theme.js code, replace

$('#PageContainer').css('padding-top', $headerHeight);

with

$('.main-content').css('padding-top', $headerHeight);

2. In timber.scss.liquid, locate

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
}

and add a line for padding-top with some hard-coded placeholder pixels

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
padding-top: 180px; }

Mess around with the "180px" number to find a padding that works for your site/header. This is just a placeholder to make sure the content loads immediately some place below the header before the javascript has a chance to kick in and calculate the actual padding required by your specific header. Before I added this second step, the site would immediately load with content behind the header and then after a second or two the content would be pushed down to the correct position. By making both these changes, the content will load in a way that is not disruptive to the user. I'm assuming it's not good to have such a hard-coded pixel value for padding-top, so this is a hybrid solution that holds the page content in roughly the right place while javascript comes up behind and changes it into a more precise number in the spirit of adaptivity.

 

Again, I'm not a professional developer and maybe a professional developer can offer some advice or improvements. But so far this is working well for me on both desktop and mobile.


Above code absolute perfect . 

We provide that code for debut theme . If there you change the selector that code will also work perfect.

For that pushing effect you need to add initial padding-top in css.

0 Likes
New Member
1 0 0

Code works great, just would like to remove it from the cart page as it is blocking my upsell. 

 

Thanks in advance. 

 

0 Likes