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
77 13 14

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
Shopify Expert
77 13 14

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
77 13 14

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
New Member
1 0 0

Thank you Sean! It works really well.

I´m a Shopify noob. I found out how I adjust the height but it is only the height of the "background"  how do I adjust the position of the Navigation, Logo, Search etc. in relation to the height of the "background? Hope this does make sense. Any help is appreciated

0 Likes
New Member
3 0 0

Hi,

 

I still didn't get how to solve the problem of content getting pushed/adjusted after a few seconds. 

Want everything to get loaded in one shot. Seems very unpleasant to the eye that the entire page moves down after a second. 

 

0 Likes
New Member
1 0 0

I am using Narrative theme. And it's pretty easy to this in that theme. Just follow the steps mentioned above.

0 Likes
Tourist
11 0 0

I am having an issue with the color of the header on my homepage. It is the only page where the background of the header is transparant. All other pages the header has the same color as the background of my website, as it should be.

 

I now installed a 3rd party app to install a mega menu. Its not properly functioning with the code ive added (as written in the explanation, which im very thankful for).

 

I would like to get my home page header the same color as on the other product pages, else its not very well see able. Can I just make some adjustments in the added coding or do i have to add something new?

 

Thnx

0 Likes