Solved

How to make announcement bar sticky in impulse theme

Neonomad
Tourist
18 0 2

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

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an 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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 3 (3)

diego_ezfy
Shopify Partner
2935 562 883

This is an 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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Neonomad
Tourist
18 0 2

Thanks Diego, that worked perfectly. Thanks once again.

SuzieB5
Visitor
1 0 0

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