Stick facets container mobile to top of the page

Shopify Discussion
,
1

Hello, I’m using dawn theme and I’m trying to keep the facets container on mobile at the top of the page when scrolling down so it sticks. URL: Luxury & Handmade Jewelry | Affordable, Personalized & Sterling Silver – InteriorGlows
I tried doing

.facets-container {
position: sticky;

top: 0px;

}

But it did not make the container stick to the top, when scrolling. Does anyone know how to do this?

image
image1919×1026 234 KB

2

Please add this code and check.

#main-collection-filters {
  position: sticky;
  top: 0px;
  background: #fff;
  z-index: 9;
}

Best regards,
Dan from Ryviu: Product Reviews App

3

I’d amend @Dan-From-Ryviu’s code a bit to give some padding at the bottom and amend z-index to not overlay the header:

#main-collection-filters {
  position: sticky;
  top: 0px;
  background: rgb(var(--color-background));
  z-index: 2;
  padding-bottom: 1rem;
}

position: sticky is a sensitive beast :slight_smile: