How to make announcement bar sticky in impulse theme

[Neonomad]

Hi,

I am currently using an impulse theme for my shopify store, www.neonomad.co.uk. I would like to make the announcement bar sticky (e.g it does not disappear when scrolling down). Can anyone help me with this, I assume I will need to input/edit the code?

Thanks

[diego_ezfy · Accepted solution]

@Neonomad 

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.announcement-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 7;
}

body{
    margin-top: 41px;
}

@media (max-width: 767px){
    body{
    margin-top: 55px;
}

}

Please keep in mind that while this will work this is not the most ideal solution, you may find some bugs with it (especially if you add too much text in or change the font size of the banner). 

A fully custom solution would take more work, if this is something of your interest feel free to reach to me personally so we can talk it through.

Kind regards,
Diego

[Neonomad]

Thanks Diego, that worked perfectly. Thanks once again.

[SuzieB5]

Hi Diego,

I'm using the Impulse theme and also want to make the announcement bar in my header sticky, so that it is visible on every page while users scroll down.

I've input the code you suggested (although I only had the option of theme.css.liquid, not theme.scss.liquid that you suggested - not sure if this makes a difference.)

Unfortunately it hasn't worked for me. 

Any other suggestions please - or where might I be going wrong?

Many thanks

Suzie