Hide "All" Category on Desktop only

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!

Thanks @creedon!

Is there a way to hide the "All Gifts" breadcrumb from desktop only, too? (But I definitely want to keep the other breadcrumbs on desktop).

Quote

Is there a way to hide the "All Gifts" breadcrumb from desktop only, too?

I have updated my previous code post.

Let us know how it goes.

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

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.

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

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.

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.

Thank you so much! That seems to work.

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

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.

Thank you! Worked like a charm!