Sticky header Brooklyn theme drags product information down when more then 1 picture

Driesmolenaar
New Member
1 0 0

good day,

I have a code for the sticky header which changes color when scrolling down which i really like, however i just noticed when adding an second picture it drags down the information on the products page.

this is the code i used for theme.scss.liquid:

 

.header-wrapper, .header-container {
  position: fixed;
  z-index: 10;
  background-color: rgba($colorBody, 0.0);
  width: 100%;
}
 
.header-sticky.header-wrapper {
 
  background-color: rgba($colorBody, 0.5);
  border-bottom: 1px solid rgba($colorTextBody, 0.2);
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  
  .site-nav {
    transition: all 0.3s ease-in-out, height .8s ease;
    -webkit-transition: all 0.3s ease-in-out, height .8s ease;
    -o-transition: all 0.3s ease-in-out, height .8s ease;
 
    margin-top:0 !important;
  }
  
}
 
.header-sticky a {
  color: $colorTextBody !important;
}
 
.header-sticky .burger-icon {
  background-color: $colorTextBody !important;
}
 
body:not(.template-index) .main-content {
padding-top: 160px; /*or another number as necessary*/
}
 
.shopify-payment-button {
  z-index: 0; 
}
 
and this for the theme.js.liquid

$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.header-wrapper').addClass('header-sticky');
} else {
$('.header-wrapper').removeClass('header-sticky');
}
});

 i tried adding below as per an other question but it changed nothing, i would like to keep my code because of the shade and the change of color. anyone who could assist? Much thanks in advance

#shopify-section-header {
z-index: 9999;
}
0 Likes