Jump to content

Separate scrolling of left hand categories from main shopping page

Recommended Posts

Site URL: https://www.extremegear.org/shop

Hi Everyone,

I am not sure how to best describe what I want to change on my website, so please bare with me. When I am on the top of this page https://www.extremegear.org/shop the left hand categories section is visible up to the "Hammers" category. When I scroll down a little, I can see more products and categories that are below "Hammers". The second photo shows I can see up to "Ice Axes". But when I scroll a little more, one the "shop for gear" (blue circle) header is gone, the categories no longer scroll down until I scroll through all of my 600+ products. This happens on all of my pages. Can I make the "category" area scroll independent of the products?

Thanks for any suggestions.

 

John

image.thumb.png.81d3ece9cb371e3aaf28fd35cc181046.png

image.thumb.png.f57c069350a7dee5d41265795a2f2378.png

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I think your best bet is just to remove the position:sticky; property, and allow it to act like a normal part of the page. Adding a scroll to a sticky element isn't a great idea, and the bottom categories will still be hidden. This does mean that the categories get hidden when you scroll past, but I would suggest that that is a better user experience than what you have. Alternatively, grouping them so you have fewer categories might be a solution.

Try one of these custom CSS (not both):

undo sticky

@media screen and (min-width: 768px)
.products.collection-content-wrapper .nested-category-tree-wrapper {
    position: initial !important;
    top: initial;
}

OR add scroll

@media screen and (min-width: 768px)
.products.collection-content-wrapper .nested-category-tree-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 200px;
    max-height: calc(100vh - 200px);
    overflow: scroll;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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...

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.