Sticky header and announcement bar - Brooklyn theme

Maitri
Excursionist
35 0 7

Hi there, 

I'm using the Brooklyn theme and I have a sticky header using this code sample

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.main-content {
 padding-top: 80px;
}
.shopify-payment-button {
 z-index: 0;
}

 The thing is that I also have an announcement bar from another app which creates a gap when I scroll down. I actually can see my website scrolling underneath my header. 

I'd like this gap to disappear when scrolling down like on this site : https://vivadermabeauty.com/ 

Or at least make this bar stick with the header to make it all more coherent

 

Can someone help me with that ?

0 Likes
Zworthkey
Shopify Partner
296 17 55

Paste this

#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;
}
}

code in Theme.scss

Thank you

0 Likes
Zworthkey
Shopify Partner
296 17 55

and

 

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

 

Theme.js

I hope you will get the proper solution.

Thank you

0 Likes
Maitri
Excursionist
35 0 7

Thank you but it doesn't seem to be working .. Do you maybe have another solution ? 

0 Likes
Zworthkey
Shopify Partner
296 17 55

Can you Share me your website url

to check it.

0 Likes
Maitri
Excursionist
35 0 7
Zworthkey
Shopify Partner
296 17 55

Don't worry we will provide you proper solution. 

Thank you

0 Likes
Zworthkey
Shopify Partner
296 17 55

hello dear

Make top position 0px add code to Theme.scss

 

.header-wrapper, .header-container {
    position: fixed;
    top: 0px;
}

 

 thank you i hope i will exactly work.

0 Likes
Zworthkey
Shopify Partner
296 17 55

If you are not Still Satisfied pls contact us. at official@zworthkey.com

thank you

Maitri
Excursionist
35 0 7

Just emailed you thank you

0 Likes