Sticky Header Dawn Theme (Announcement Bar + Menu Bar)

Store Design
1

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!

2

@Alby98

grate

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

1 Like
3

Hi! Thank you for the reply!

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

Thank you!

1 Like
4

@Alby98

yes please share your header script code so i will update

1 Like
5

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');
  }
});
1 Like
6

@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');
  }
});
1 Like
7

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

Thank you very much

1 Like
8

@Alby98

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

1 Like
9

@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;
}
3 Likes
10

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.

1 Like
11

@JH_TECH

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

1 Like
12
1 Like
13

@JH_TECH

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