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

Have Category Sidebar Navigation on desktop and Top on mobile? How to have good category navigation on both?


junecz

Question

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.

 

 

 

sqsp nav2.PNG

Edited by junecz
added update
Link to comment

3 answers to this question

Recommended Posts

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

 

 

 

sqsp nav2.PNG

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;
	}
}

image.png.aa643ffef08ad8e6e252a200ed024faf.png

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
If 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
  • 0

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?

 

 

 

 

view all great_LI.jpg

view birds great_LI.jpg

view bird pillow_LI.jpg

Edited by junecz
smaller photos
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...