Collection List Page - How to Sticky Header? Brooklyn Theme

Highlighted
Tourist
4 0 2

Hello All,

I would like to stick the header on my collections list page. Can anyone provide some direction on how to do this?

Store url: https://the-troll-shop-ri.myshopify.com/

Thank you very much!

 

Capture.PNG

0 Likes
Highlighted
Shopify Partner
591 84 127

Please place this code in the theme.liquid file between <head></head>

 

$( "body" ).scroll(function() {
{% if template.name == 'collection' %}
if (document.body.scrollTop > 50) {
    $('.site-header').css({
      position: 'fixed',
      width: '100%',
      background-color: '#ffffff'
    });
  } else {
    $('.site-header').css({
      position: 'unset',
      width: '100%',
      background-color: 'transparent'
    });
  }
{% endif %}
});

 

 

Please this code at the end of theme.scss

 

.map-section__content {
z-index: 1
}

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
40 0 4

hey.

its dosent work for me.. 

 

thank you

@paramSoft 

0 Likes
Highlighted
Shopify Partner
591 84 127

Please put the code again into your website so that I can check what the issue is

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
40 0 4

done. 

this is my site - https://pequeno-mio.store/

 

0 Likes
Highlighted
Shopify Partner
591 84 127

It seems that you did not put the code in the theme.liquid.

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
40 0 4

2020-10-26 (3).png

0 Likes
Highlighted
Shopify Partner
591 84 127

Please place this code between <script type="text/javascript"> code here </script>

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
40 0 4

still dont work...  

0 Likes
Highlighted
Shopify Partner
591 84 127

Please replace code with this

 

 

$(window).scroll(function() {
{% if template.name == 'collection' %}
if ($(window).scrollTop() > 50) {
    $('.site-header').css({
      'position': 'fixed',
      'width': '100%',
      'background-color': '#ffffff'
    });
  } else {
    $('.site-header').css({
      'position': 'unset',
      'width': '100%',
      'background-color': 'transparent'
    });
  }
{% endif %}
});

 

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes