junecz Posted March 21, 2021 Share Posted March 21, 2021 (edited) Site URL: http://czebra-shop.squarespace.com First, thanks to everyone who contributes here. I've cobbled together quite a bit of code to create what I have so far. A couple of outstanding issues I'll ask about in other posts. For now, my biggest headache is how limited the category navigation options are. What I want to achieve: Categories (animals, floral, etc.) visible on each page of products, filtered or not, on both desktop and mobile. Ideally, I'd like to have the Category Sidebar Navigation on desktop and Top Category Navigation on mobile. Is that possible? The problems: With Categories Type: Sidebar selected, it works as desired on desktop (i.e., categories are visible on all products pages). However, categories don't appear on mobile unless the device is horizontal. That's not good. With Categories Type: Top selected, on desktop categories appear only on the page with all products and do not appear on filtered pages. On mobile, it's the same - but with the addition of that atrocious, non-user-friendly scroll bar. (I did find this css code which fixes that nicely but the lack of categories on filtered pages remains.) I also tried this css code (since removed) to keep categories on all pages on mobile but spacing is off and text falls off the sides, creating a scroll bar at the bottom of the mobile page. (see pic) So, I guess my questions are: 1) Is there a way to use Top on mobile and Sidebar on desktop? 2) With Top, how to have categories show on all filtered pages. TIA! site: https://czebra-shop.squarespace.com pw: myna Update: I added a "view all' link at top of products page. That'll work for now, but I wish there was a better solution. Edited March 21, 2021 by junecz added update Beyondspace 1 Link to comment
Beyondspace Posted March 23, 2021 Share Posted March 23, 2021 On 3/21/2021 at 9:24 AM, junecz said: Site URL: http://czebra-shop.squarespace.com First, thanks to everyone who contributes here. I've cobbled together quite a bit of code to create what I have so far. A couple of outstanding issues I'll ask about in other posts. For now, my biggest headache is how limited the category navigation options are. What I want to achieve: Categories (animals, floral, etc.) visible on each page of products, filtered or not, on both desktop and mobile. Ideally, I'd like to have the Category Sidebar Navigation on desktop and Top Category Navigation on mobile. Is that possible? The problems: With Categories Type: Sidebar selected, it works as desired on desktop (i.e., categories are visible on all products pages). However, categories don't appear on mobile unless the device is horizontal. That's not good. With Categories Type: Top selected, on desktop categories appear only on the page with all products and do not appear on filtered pages. On mobile, it's the same - but with the addition of that atrocious, non-user-friendly scroll bar. (I did find this css code which fixes that nicely but the lack of categories on filtered pages remains.) I also tried this css code (since removed) to keep categories on all pages on mobile but spacing is off and text falls off the sides, creating a scroll bar at the bottom of the mobile page. (see pic) So, I guess my questions are: 1) Is there a way to use Top on mobile and Sidebar on desktop? 2) With Top, how to have categories show on all filtered pages. TIA! site: https://czebra-shop.squarespace.com pw: myna Update: I added a "view all' link at top of products page. That'll work for now, but I wish there was a better solution. try if this helps @media screen and (max-width: 575px) { .tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding { justify-content: center; } .products.collection-content-wrapper .nested-category-tree-wrapper { display: block; flex-wrap: wrap; overflow-x: hidden; justify-content: center; float: none; max-width: inherit; } .products.collection-content-wrapper .nested-category-tree-wrapper ul { display: flex; flex-wrap: wrap; overflow-x: hidden; justify-content: center; } .products.collection-content-wrapper .nested-category-tree-wrapper .category-item a { padding-top: 0; } .products.collection-content-wrapper .nested-category-tree-wrapper .category-item { flex: 0 0 auto; margin: 0 1.5vw; position: relative; } .products.collection-content-wrapper .nested-category-tree-wrapper .category-item:not(:last-child):after { content: ''; opacity: .2; width: 1px; height: 20px; transform: translateY(-50%); background: #000; position: absolute; top: 50%; right: -1.5vw; } .nested-category-children + .nested-category-tree-wrapper { display: none !important; } } Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
junecz Posted April 2, 2021 Author Share Posted April 2, 2021 (edited) Thank you @bangank36! I really appreciate you taking the time. This works great up to a certain point. View all - great (pic 1). View Category - great (pic 2). View Sub-category... it's gets messy again (pic 3) Thoughts? Edited April 2, 2021 by junecz smaller photos Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 @junecz Can you share link to page in screenshot? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment