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

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.

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

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?

@junecz Can you share link to page in screenshot?