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:
Question
Simon-JustGoodJuju 4
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-JustGoodJujuAdd info about 'top'
Link to post
Top Posters For This Question
3
2
2
1
Popular Days
Mar 7
2
Oct 27
1
Mar 6
1
Nov 17
1
Top Posters For This Question
kindandbrave 3 posts
Simon-JustGoodJuju 2 posts
tuanphan 2 posts
AndreaDube 1 post
Popular Days
Mar 7 2020
2 posts
Oct 27 2020
1 post
Mar 6 2020
1 post
Nov 17 2020
1 post
Popular Posts
AndreaDube
Try the following for 7.1: // Sticky Product Filter 7.1 // .products.collection-content-wrapper .nested-category-tree-wrapper { position: -webkit-sticky; position: sticky;
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment