Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

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