How to make announcement bar sticky in impulse theme

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

0 Likes
Highlighted

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
18 0 2

Thanks Diego, that worked perfectly. Thanks once again.

0 Likes