Sitcky annoucement bar on Rise theme

Store Design
, ,
1

Hello, i was trying few different guides to make annoucement bar sticky, but neither of them works for my Rise theme, any ideas?

2

Thanks for posting your Query on this Community Forum.

Could you please share your store url and the password [if applicable], so that I can take a look and provide you with the solution code.

Thanks

4

Hi @Pokeloot ,

From the Shopify Admin, go to Online Store > Edit theme and click on Theme settings (cog icon on the left sidebar)

image
image391×933 26.4 KB

Then scroll down until you see Custom CSS and paste the following code

.announcement-bar-section {
    position: sticky;
    top: 119px;
    z-index: 119px;
}

@media (min-width: 990px) {
   .announcement-bar-section {
       top: 138px;
   }
}

That should make the announcement bar sticky both on desktop and mobile.

5

hello, thank you for help, it kinda works, but it hides underneath images and products, do u know how i can make it be on the first layer?

6

Hi @Pokeloot ,

Try updating the code to be like this

.announcement-bar-section {
    position: sticky;
    top: 119px;
    z-index: 1;
}

@media (min-width: 990px) {
   .announcement-bar-section {
       top: 138px;
   }
}

What changed in this new version of the snippet was the value fo z-index, which had an error in the previous version. With this change the issue you are describing should be fixed.

8

@Pokeloot ah I see the issue, your theme has some css conflicting with the code snippet I shared. Try updating the code to be like this

.announcement-bar-section {
    position: sticky;
    top: 119px;
    z-index: 1 !important;
}

@media (min-width: 990px) {
   .announcement-bar-section {
       top: 138px;
   }
}
9

My only suggestion is to try and use the --header-height CSS variable instead of hard coded values. This also will make the code simpler.
Something like:

.announcement-bar-section {
    position: sticky;
    top: var(--header-height);
    z-index: 1;
}

(not sure if applicable though without seeing the site)

10

Please share the link to your store

11

Interesting – this post

was marked as “Solution” yesterday ?!

12

it worked, thank you very much, i dont know why the solution check box was missing