Sticky Header Dawn Theme (Announcement Bar + Menu Bar)

[Alby98]

Hi! How can I create a sticky announcement bar? I have already implemented the code to make the menu sticky

Here's the store: https://prasadayoga.it/products/prasadamat

Password: prasada

Thank you all! Have a nice day!

[KetanKumar]

@Alby98 

grate 

yes apply same thing Announcement Bar and try if any issue let me know 

[Alby98]

Hi! Thank you for the reply!

Can you write here the code? I don't understand what I have to do

Thank you!

[KetanKumar]

@Alby98 

yes please share your header script code so i will update 

[Alby98]

CSS:

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

 Javascript:

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

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

$(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 1) {
    $('.site-header').css('top', '0');
  } else {
    $('.site-header').css('top', 'initial');
  }
});

[KetanKumar]

@Alby98 

try this code

CSS:

#SearchDrawer {
  z-index:1001;
}

#shopify-section-header, #shopify-section-announcement-bar {
  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;
}
}

Javascript:

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

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

$(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 1) {
    $('.site-header').css('top', '0');
  } else {
    $('.site-header').css('top', 'initial');
  }
});

[Alby98]

Unfortunatly it doens't work.. Is it possible to solve this?

Thank you very much

[KetanKumar]

@Alby98 

yes, if possible to give me theme access so i will check and let you know 

[KetanKumar · Accepted solution]

@Alby98 

add this code 

base.css file 

/* section-header */
#shopify-section-header{
  z-index: 3;
  top: 36px;
}

.shopify-section-header-sticky, #shopify-section-announcement-bar {
  position: sticky;
  top: 0;
}

[JH_TECH]

Hello, 

we applied this code on our base.css file and it works as desired when scrolling down, but when we scroll up, there is a gap between the menu bar and the top of the screen. This gap is also created when we press the menu to see more options. Do you know how we can fix this?

Thank you,

Jacques Hermes team. 

[KetanKumar]

@JH_TECH 

oh sorry for that issue can you please share your store url.

[JH_TECH]

jacqueshermes.com

[KetanKumar]

@JH_TECH 

thanks but i can't see any issue can you please send screenshot