Jump to content

Hide "All" Category on Desktop only

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://willinglee.co/build

Hi there, I'm trying to remove the "All gifts" category from desktop view, but keep it visible on mobile. The only way users can navigate through the shop on mobile is if there are breadcrumbs. If I use Squarespace's normal "disable" option for the "all" category, it disappears on mobile and people are stuck viewing only one category. If anyone knows how to help by removing the category only from desktop, I'd be super grateful. Thank you!

Circle Q1.png

Circle Q2.PNG

Link to comment
  • Replies 11
  • Views 522
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add the following to Design > Custom CSS.

@media only screen and ( min-width : 800px ) {

  .products.collection-content-wrapper .nested-category-tree-wrapper > ul > li:first-child,
  .tweak-products-breadcrumbs .products.collection-content-wrapper .nested-category-breadcrumb
  
    {
    
      display : none;
      
      }
      
  }

This is for v7.1.

Let us know how it goes.

Edited by creedon
version 3

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

but that didn't seem to fix the breadcrumb on desktop.

This is what I see (or don't see) when I install the code locally.

458251564_ScreenShot2022-08-23at9_12_41PM.png.6e1fd6605d8b95d83f511d31bd3dd2c6.png

I don't see my code installed on your site so it is hard to diagnose something that isn't installed.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi @creedon, that's strange, because 10 hours ago the code was installed. Not sure why you weren't seeing it on your end. I also don't know why, but the code here in the forum wasn't updated to what is showing now... the reason the breadcrumb fix wasn't working is because the forum was showing your old code and not the new updated one.

I just tried the code above and you're correct, it does remove the breadcrumb on desktop, thank you. This morning, though, I realized it was hiding the first nested item in every category, so I removed the code since I'll need my customers to be able to see those.

In the photos, you'll notice that when your code isn't installed, my nested categories work correctly. When your code is installed, it removes "All" and the breadcrumb, but also the first nested category within all my main categories.

Do you happen to know how would I remove the "All" category without affecting the other nested categories?

Appreciate your assistance.

Screen Shot 2022-08-24 at 9.33.09 AM.png

Screen Shot 2022-08-24 at 9.33.23 AM.png

Link to comment
Quote

This morning, though, I realized it was hiding the first nested item in every category

I have updated my post again. It is version 3 in case this page is stale. Try a refresh if it does appear out of date.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon I hope this is the last question I have for you, sorry! I have two product pages, and I only want this code applying to the one. When I added the collection to your code, the breadcrumb came back. Any way to resolve?

/*Remove "All" category in build shop on desktop only*/
#collection-5f7a054fc8f18a2d033b3148 {@media only screen and ( min-width : 800px ) {

  .products.collection-content-wrapper .nested-category-tree-wrapper > ul > li:first-child,
  .tweak-products-breadcrumbs .products.collection-content-wrapper .nested-category-breadcrumb
  
    {
    
      display : none;
      
      }
      
  }}

 

Link to comment
19 hours ago, kindandbrave said:

When I added the collection to your code, the breadcrumb came back. Any way to resolve?

I suggest putting the code in Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

Wrap the code in a style tag. <style>[code here]</style> Do not include the collection id.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.