Jump to content

mobile view - product menu needs to fit better

Go to solution Solved by Ziggy,

Recommended Posts

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!

 

Screenshot_20231106_172031_Chrome.jpg

Edited by AirleaEvary
Link to comment

You can try this Custom CSS:

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this instead:

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Link to comment
  • Solution

Try this Custom CSS:

.products.collection-content-wrapper .nested-category-tree-wrapper .category-link {
    font-family: MrsEavesOT-Roman !important;
}

Not sure this matters in your case but you may want to fix or remove this:

image.png.8006736dfe09b0bd3cd025af71b9dcc9.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.