Need help with sticky product filter

Try the following for 7.1: 

// Sticky Product Filter 7.1 //

.products.collection-content-wrapper .nested-category-tree-wrapper  {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

use px, eg 100px, not 100

Tuanphan - I cannot believe I did that!  Thank you so much for pointing it out.  It works great of course.

@tuanphan is this possible in 7.1?

On 10/24/2020 at 11:12 AM, kindandbrave said:

@tuanphan is this possible in 7.1?

Can you share link? We can check easier

@tuanphan: https://www.littleboxes.shop/build

🙂

@AndreaDube that worked! Thank you so much!! 🥰

Is there a way for this to work in mobile? I find that it seems to float in the middle of the screen but doesn't have a background so it blends with images.

16 hours ago, kristiitaylor said:

Is there a way for this to work in mobile? I find that it seems to float in the middle of the screen but doesn't have a background so it blends with images.

Can you share link to your site? We can check easier

On 4/5/2021 at 6:28 AM, tuanphan said:

Can you share link to your site? We can check easier

Yes! ktleathergoods.squarespace.com :)

On 4/7/2021 at 2:35 AM, kristiitaylor said:

Yes! ktleathergoods.squarespace.com :)

 

Hi. It looks like you solved this?

On mobile, filter overlap products. You can edit your code to this

/* Product filter */
@media screen and (min-width:641px) {
.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}
}

On 4/11/2021 at 7:36 PM, tuanphan said:

Hi. It looks like you solved this?

On mobile, filter overlap products. You can edit your code to this

/* Product filter */
@media screen and (min-width:641px) {
.ProductList-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}
}

 

You're amazing this worked! :) :) :)