Squarespace 7.1, how to setup the product breadcrumb and category layout on mobile...solved.

On squarespace version 7.1, when in mobile view, if you have a long list of categories, it creates a scrolling list that travels sideways and the breadcrumbs are gone on mobile.  Insert this code into your Custom CSS to make the categories center align and wrap, with no scrolling.  It also makes the breadcrumbs visible on mobile.

@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-children {
    padding-top: 30px;
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
}
@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-breadcrumb {
    text-align: center;
  }
}
@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

I forgot this.

@media only screen and (max-width: 767px) {
.tweak-product-basic-item-navigation-breadcrumbs .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb, .tweak-product-basic-item-navigation-both .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
    z-index: 1;
  }
}

On 12/20/2020 at 1:06 AM, MiridiosII said:

I forgot this.

@media only screen and (max-width: 767px) {
.tweak-product-basic-item-navigation-breadcrumbs .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb, .tweak-product-basic-item-navigation-both .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
    z-index: 1;
  }
}

 

thank you so much that's really helpful! I don't seem to be getting all of the breadcrumbs though. I get Shop and product title. Much better than before but if there's a way of getting the subcategory title that would be fabulous!!

Can you share site url?

On 1/10/2021 at 12:08 PM, No_Idea said:

thank you so much that's really helpful! I don't seem to be getting all of the breadcrumbs though. I get Shop and product title. Much better than before but if there's a way of getting the subcategory title that would be fabulous!!

 

Hi! What a big help this code is. Did we ever figure out how to display the "Category" breadcrumb?

Thank you! This is working great.

I could not see any category display at all on mobile and tried just about every code snippet posted on this topic with no success. I finally realized: Category Type must be Top, not Sidebar (which I prefer). The sidebar navigation does show up when the mobile device is turned to horizontal position but that's not ideal...

I wanted to share this info for others having the same problem I had. (I might have missed it but I searched Sqsp documentation too and found no mention of this.)

Is it possible to center the breadcrumbs? Any CSS solutions?

On 1/27/2022 at 7:51 AM, jason.storey said:

Is it possible to center the breadcrumbs? Any CSS solutions?

Possible. Can you share link to product in screenshot?

@tuanphan No. It's a temporary site. All I'm looking for is the CSS to CENTER-ALIGN the BREADCRUMBS on desktop site-wide. 

On 1/29/2022 at 4:10 AM, jason.storey said:

@tuanphan No. It's a temporary site. All I'm looking for is the CSS to CENTER-ALIGN the BREADCRUMBS on desktop site-wide. 

You can setup password & share url