d
Topic
Posts:
14
7 days ago

How do I make The Announcement Bar Stick To The Top Of Screen

I am using the Debut  theme and I just need to know what is he script of code i need to make the announcement bar stick to the top of the screen, so wherever a visitor goes on my website the announcement bar is stuck to the top of the screen?

D.H.C
i
Replies
Posts:
469
Last edited 7 days ago

Hi Damany,

Head over to your admin and for Online store > Themes and click the Customize button.

Now from the Sections tab, click the Header item. In there you shall find a section Announcement Bar with 2 checkbox settings. You want to make sure Show announcement is checked and Home page only unchecked. Save and enjoy.

Hope this helps!

I turn coffee in to code - since 1998
Posts:
14
7 days ago

Yea I tried that already and it only pops up at the top BUT when i scroll it essentially dissappears.

What I am wanting to do is have the announcement bar stuck to the top of the screen no matter where a visitor scrolls or what page they are on.

So if a visitor is on the "home page" or on a "product page" or "blog page", etc. and happens to scroll down to the footer, the announcement bar can still be seen stuck to the top of the screen  

I essentially want the announcement bar to be ALWAYS seen and visible, no matter where the visitor is at on my website.

D.H.C
Posts:
469
7 days ago

Hi Damany,

So that is usually called a sticky header and can be done in a number of ways

  1. Only CSS using positiion: sticky BUT browser support is limited and doesn't apply to all elements so that's a no go in your case
  2. Plain JavaScript (i.e. no jQuery) and CSS as described here. Since Shopify themes already use jQuery, doesn't make sense to not use it really... so proceed on to optio n 3
  3. Using jQuery and CSS as demonstrated here

IMPORTANT DISCLAIMER: As you will be editing your theme.js and theme.scss.liquid, please make sure to create a copy of your current theme before any edits. Then edit your copy rather until you got it right. This is really important because some asset changes cannot be rolled back.

Best wishes!

I turn coffee in to code - since 1998
Posts:
14
6 days ago

Ok thats what I was looking for, I am already a little familiar with code so it should be simple to implement.

Thanks for your help

D.H.C
Posts:
14
4 days ago

I am trying to do the 3rd option you listed  "Using jQuery and CSS " the only thing is I have no idea what line I am suppose to add that code to.

Or do I just add these lines to the bottom of each page?

D.H.C
Posts:
469
4 days ago
g
1
upvotes

Hi Damany,

Not sure it's that easy though I haven't tried appending to the end. I like putting code, just like anything else, in its right place and order. So let's do that step-by-step.

The example I linked showing some jQuery sticky element will require 3 changes.

  1. adding a .sticky class to the element we wish to make sticky on scroll
  2. adding some CSS class (in the example above that's .fixed) that positions a sticky element to be fixed position
  3. some JS that selects an element with .sticky class and on window scroll, adds the .fixed class to it if the offset to top is greater than or equal to 100px. If window pos offset is less than 100px, remove the .fixed

Step 0 - DO THIS BEFORE YOU EVEN MAKE COFFEE

Make a copy of your currently published theme. We will be changing asset sources that cannot be rolled back so if anything breaks, the only way to fix it is to find a fix which you do not want to be doing on your live theme.

Step 1

So let's go through these in order. The announcement bat is defined in Sections / header.liquid. Open that up and look for this line of code

<div class="announcement-bar">

Now exchange it for

<div class="announcement-bar sticky">

Step 2

Styles are defined in Assets / theme.scss.liquid so let's open that one up and add the .fixed class. Header related classes are mostly around the modules part of the stylesheet so search for

/*================ MODULES ================*/

And simply add

.fixed {
  position: fixed !important;
  top:0;
  left:0;
  width: 100%;
}

You may have noticed that I added the !important flag just to make sure other rules do not override the fixed positioning we will be adding.

Step 3

Now for the "most involved" part. Any sort of JS is in Assets / theme.js so we open that one up and look for

theme.Header = (function()

That's where header related functions are defined. Since our announcement bar is in the header section, we want to add our code here so we know where to find it 1 year later.

Right after the above function statement you will see this selector object being declared

var selectors = {
  body: 'body',
  multicurrencySelector: '[data-currency-selector]',
  navigation: '#AccessibleNav',
  siteNavHasDropdown: '.site-nav--has-dropdown',
  siteNavChildLinks: '.site-nav__child-link',
  siteNavActiveDropdown: '.site-nav--active-dropdown',
  siteNavLinkMain: '.site-nav__link--main',
  siteNavChildLink: '.site-nav__link--last'
};

We want to add our sticky selector to that

var selectors = {
  body: 'body',
  multicurrencySelector: '[data-currency-selector]',
  navigation: '#AccessibleNav',
  siteNavHasDropdown: '.site-nav--has-dropdown',
  siteNavChildLinks: '.site-nav__child-link',
  siteNavActiveDropdown: '.site-nav--active-dropdown',
  siteNavLinkMain: '.site-nav__link--main',
  siteNavChildLink: '.site-nav__link--last',   // added comma here
  sticky: '.sticky'                            // added sticky selector
};

Now scroll down a few lines and you will find the init() function

function init() {
  cacheSelectors();

  cache.$parents.on('click.siteNav', function() {});

  // check when we're leaving a dropdown and close the active dropdown
  $(selectors.siteNavChildLink).on('focusout.siteNav', function() {});

  // close dropdowns when on top level nav
  cache.$topLevel.on('focus.siteNav', function() {});

  cache.$subMenuLinks.on('click.siteNav', function(evt) {});

  $(selectors.multicurrencySelector).on('change', function() {});

  //
  // 
  // this is where we want to add our sticky code
  //
  //
}

So above you see the comment I added where we want to place our sticky code which is what we will do

$(window).scroll(function() {
  var sticky = $(selectors.sticky),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

And that's that. Enjoy ;-)

I turn coffee in to code - since 1998