How to make announcement bar sticky for Refresh theme

Store Design
,
1

Can someone give me the code to make my announcement bar sticky for Refresh theme on the product page and home page. I have tried using code on other discussion posts but none have worked. Thanks!

2

Hi @AlwaysFresh

Could you share your store URL?

3
  1. In the code editor, locate the theme.js or theme.js.liquid file. If it doesn’t exist, you may need to create it.
  2. Open the theme.js or theme.js.liquid file and add the following code:
$(document).ready(function() {
  var announcementBar = $('.announcement-bar');
  var announcementBarHeight = announcementBar.outerHeight();
  var announcementBarTop = announcementBar.offset().top;

  $(window).scroll(function() {
    if ($(window).scrollTop() > announcementBarTop) {
      announcementBar.addClass('sticky');
      $('body').css('padding-top', announcementBarHeight);
    } else {
      announcementBar.removeClass('sticky');
      $('body').css('padding-top', 0);
    }
  });
});
​
  1. In the code editor, locate the theme.scss.liquid or theme.css.liquid file.
  2. Open the file and add the following CSS code:
.announcement-bar.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

body.sticky-announcement-bar {
  padding-top: /* add the height of your announcement bar here */;
}
​
4

Hi [email removed]AlwaysFresh,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

#shopify-section-announcement-bar{
position: sticky;
top:0
}
#shopify-section-header.shopify-section-header-sticky{
top:40px !important}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly