mobile view - product menu needs to fit better

The password to the site is Artist2023

https://www.thejanimalstore.com/shop

when anyone views the store page on their phone, the product menu at the top gets cut off and there is a horizontal scroll bar to see the full menu (see screen cap)

Is there a way to change this so that the links stack instead of scroll? That way they are all highly visible on mobile view. 

Thanks in advance!

You can try this Custom CSS:

.nested-category-tree-wrapper>ul {
    flex-direction: column;
}

4 minutes ago, Ziggy said:

You can try this Custom CSS:

.nested-category-tree-wrapper>ul {
    flex-direction: column;
}

 

This changed the desktop view to a stacked list (see screen cap)

I only want the mobile view to stack. 

Try this instead:

@media only screen and (max-width:767px) {
  .nested-category-tree-wrapper>ul {
    flex-direction: column;
  }
}

this worked- kind of. Now they are scrunched together instead of stacking. Only on mobile view though! so that is in the right direction

I do really appreciate this. These breadcrumb menus are a mess thanks to SqSp 

Here is what I see:

I can't see the code applied to your website, is it still there or have you removed it?

sorry I think I closed out the wrong page before saving - please check again. I added and saved again.

AAAaaaaand now it's stacking??!! lol ok I guess it was user error on that last try. 

Also,

Is there any way to make the custom font that's throughout the rest of the page show for this breadcrumb menu?

the code I have already adjusted the font just fine, but when I added code to make the breadcrumbs show differently the font code stopped working. 

here is ALL my code just for an FYI

@font-face {

    font-family: MrsEavesOT-Roman;

       src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf);

  }

h1 {font-family: MrsEavesOT-Roman;}
h2 {font-family: MrsEavesOT-Roman;}
h3 {font-family: MrsEavesOT-Roman;}
h4 {font-family: MrsEavesOT-Roman;}
p {font-family: MrsEavesOT-Roman;}
.header-title a {
  font-family: 'FontTitleHere' !important;
}
.header-nav-item a {
  font-family: MrsEavesOT-Roman !important;
}
time.summary-metadata-item.summary-metadata-item--date {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-title-link {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-read-more-link {
    font-family: MrsEavesOT-Roman !important;
}
.sqs-add-to-cart-button-inner {
  font-family: MrsEavesOT-Roman ;
}
.header--menu-open a {font-family: MrsEavesOT-Roman}
.collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status {
  font-family: MrsEavesOT-Roman !important;
}
.blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;}
.item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;}
.blog-item-title h1.entry-title {
    font-family: MrsEavesOT-Roman !important;
}
#siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element {
    font-family: MrsEavesOT-Roman !important;
}

a.nested-category-breadcrumb-link {
    font-family: MrsEavesOT-Roman !important;
}
/* Product Detail - Description */
section.product-details.ProductItem-details * {
    font-family: MrsEavesOT-Roman !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : MrsEavesOT-Roman;
    
    }
.newsletter-block .newsletter-form-header-title {
  font-family: MrsEavesOT-Roman !important;
}
/* Cart page custom font */
div#sqs-cart-container * {
    font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important;
}
/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: MrsEavesOT-Roman !important;
}
// Newsletter Form Description //
.newsletter-block .newsletter-form-header-description p {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Fields //
.newsletter-block .newsletter-form-field-element {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Button //
.newsletter-block .newsletter-form-button {
  font-family: MrsEavesOT-Roman !important;
}

.variant-option * {
    font-family: MrsEavesOT-Roman !important;
}
// For the Form
.sqs-block-form .field-list .title,
.sqs-block-form .field-list .caption,
.form-wrapper .field-list .field .field-element,
.sqs-block-form .field-list select,
.form-wrapper .field-list textarea,
body:not(.button-style-default) .sqs-block-form .sqs-editable-button {
    font-family:  MrsEavesOT-Roman !important;
}
.form-wrapper .field-list .field .caption {
  font-family: MrsEavesOT-Roman;
  font-size: 9px;
  color: white;
  letter-spacing: .15em;
  text-transform: none;
}

.sqs-block-button-element {
box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); 
}

.sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary {
    box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75);
}

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F0A166!important; /* change the button background color */
  border: 2px solid #EF8345!important; /* change the button border */
  font-size: 1.2rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#4E7C72!important; /* change the button background color */
  color: #EF8345!important; /* change the font color */
  box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #4E7C72 !important;/* change the button background color */ 
  color: #F0A166 !important;/* change the button font color */
  border: 1px solid black !important; /* change the button border */
  border-radius: 8rem !important; /* change the button shape */
}

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

@media only screen and (max-width:767px) {
  .nested-category-tree-wrapper>ul {
    flex-direction: column;
  }
}

good catch! Thanks