Jump to content

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

Recommended Posts

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

 

Link to comment

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

 

Link to comment
  • 3 weeks later...
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!!

 

Link to comment
  • 1 month later...
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?

Link to comment
  • 1 month later...

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

sqsp cat.PNG

Link to comment
  • 10 months later...
On 1/27/2022 at 7:51 AM, jason.storey said:

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

screenshot.jpg

Possible. Can you share link to product in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.