FROM CACHE - en_header

How to make announcement bar sticky in impulse theme

Solved
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)

Accepted Solutions
diego_ezfy
Shopify Partner
2809 531 744

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

View solution in original post

Replies 3 (3)
diego_ezfy
Shopify Partner
2809 531 744

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

Neonomad
Tourist
18 0 2

Thanks Diego, that worked perfectly. Thanks once again.

SuzieB5
New Member
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