Jump to content

Need help with sticky product filter

Recommended Posts

Site URL: https://justgoodjuju.com/bracelets

On the page (https://justgoodjuju.com/bracelets) we have a filter list (using Categories) that is presented on the Left Hand side.  When there are a lot of products (select All) and you scroll down, the filter list does stick but it does not stick at the top (i.e. the topmost category showing is Accent - Gold when I would like it to be the All).

I just can't seem to latch onto what I need in order to make it stick 'higher' in the list.  I had thought that by altering 'top' I could achieve it (as I assumed top indicates the point at which the container reaches when it sticks) but when I make 'top' any value other than 0, the list is no longer sticky!  The CSS achieving the stickiness is:

/*  FILTER ON PRODUCT PAGES   */
.ProductList-filter 
{
      position: -webkit-sticky;
      position: sticky;
      top: 0;
}

Any help would be very much appreciated.

Link to comment
  • Replies 12
  • Views 2k
  • Created
  • Last Reply
  • 7 months later...
  • 3 weeks later...
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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! :) :) :)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.