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

MiridiosII · December 20, 2020

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

MiridiosII · December 20, 2020

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

No_Idea · January 10

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!!

tuanphan · January 12

Can you share site url?

6910studio · February 20

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?

junecz · March 20

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.)

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

Question

MiridiosII

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

MiridiosII

Posted Images

5 answers to this question

Recommended Posts

MiridiosII

Link to comment

No_Idea

Link to comment

tuanphan

Link to comment

6910studio

Link to comment

junecz

Link to comment

Create an account or sign in to comment

MiridiosII

Support

Community

Developers

Resources