Simon-JustGoodJuju Posted March 6, 2020 Share Posted March 6, 2020 (edited) 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 March 6, 2020 by Simon-JustGoodJuju Add info about 'top' Link to comment
tuanphan Posted March 7, 2020 Share Posted March 7, 2020 .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. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Simon-JustGoodJuju Posted March 7, 2020 Author Share Posted March 7, 2020 Tuanphan - I cannot believe I did that! Thank you so much for pointing it out. It works great of course. Link to comment
kindandbrave Posted October 24, 2020 Share Posted October 24, 2020 @tuanphan is this possible in 7.1? Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 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. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kindandbrave Posted October 27, 2020 Share Posted October 27, 2020 @tuanphan: https://www.littleboxes.shop/build 🙂 Link to comment
AndreaDube Posted November 17, 2020 Share Posted November 17, 2020 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; } tuanphan and kindandbrave 2 Link to comment
kindandbrave Posted November 21, 2020 Share Posted November 21, 2020 @AndreaDube that worked! Thank you so much!! 🥰 Link to comment
kristiitaylor Posted April 4, 2021 Share Posted April 4, 2021 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. Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kristiitaylor Posted April 6, 2021 Share Posted April 6, 2021 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 :) Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kristiitaylor Posted April 14, 2021 Share Posted April 14, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment