Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Need help with sticky product filter


Simon-JustGoodJuju

Question

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.

Edited by Simon-JustGoodJuju
Add info about 'top'
Link to comment

12 answers to this question

Recommended Posts

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

use px, eg 100px, not 100

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...