Mobile header cutting off elements - In dire need of some assistance

Hello,

Looking to get some help after too many hours battling with GPT and Claude. I have an issue that has haunted all day. The header on the mobile portion of the editor (and live site) cuts off either the burger, or the logo on the right hand of the header. Whatever is on the right hand side bleeds off the page so to speak. 

Any advice would be hugely appreciated.

Joe

Hi,

Can you share link to this page? We can check easier

I'm experiencing similar issue.

dethreads.net 

On 9/11/2023 at 4:41 AM, cinnamoncat said:

I'm experiencing similar issue.

dethreads.net 

Can you take a screenshot? It looks fine to me

On 9/12/2023 at 4:32 AM, tuanphan said:

Can you take a screenshot? It looks fine to me

Yes, please see below.

I'm hoping for the breadcrumb to show "Shop > Category > Item Name", in this case it would be "Shop > Pasties > Show Your Pride Pasties".

Thank you!

16 hours ago, cinnamoncat said:

Yes, please see below.

I'm hoping for the breadcrumb to show "Shop > Category > Item Name", in this case it would be "Shop > Pasties > Show Your Pride Pasties".

Thank you!

I don't know how to add this automatically but if you agree to add it manually, I can give the code

• Ideal is I will give some new breadcrumb code
• You edit text, url, and add it to Code Block - Additional Info
• You will need to do this for all products

On 9/15/2023 at 2:49 AM, tuanphan said:

I don't know how to add this automatically but if you agree to add it manually, I can give the code

• Ideal is I will give some new breadcrumb code
• You edit text, url, and add it to Code Block - Additional Info
• You will need to do this for all products

That works! Yes, please!

On 9/19/2023 at 11:44 PM, cinnamoncat said:

That works! Yes, please!

This will take some steps

First, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.ProductItem-nav');
});
</script>
<style>
nav.ProductItem-nav>div:not(.custom-breadcrumb) {
    display: none !important;
}
</style>

Next you need to edit each product > add this Code Block to Product Additional Info

  <div class="ProductItem-nav-breadcrumb" data-animation-role="content">
    <a href="/shop" class="ProductItem-nav-breadcrumb-link">Shop</a>
     <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/gratuity" class="ProductItem-nav-breadcrumb-link">Gratuity</a>
    <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/p/custom-dress" class="ProductItem-nav-breadcrumb-link">Custom Dress — Deposit</a>
  </div>

The code will create a bar like this in Additional Info

then repeat #2 for all products

You can edit Category Name/URL - Product Name/URL in the code

5 hours ago, tuanphan said:

This will take some steps

First, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.ProductItem-nav');
});
</script>
<style>
nav.ProductItem-nav>div:not(.custom-breadcrumb) {
    display: none !important;
}
</style>

Next you need to edit each product > add this Code Block to Product Additional Info

  <div class="ProductItem-nav-breadcrumb" data-animation-role="content">
    <a href="/shop" class="ProductItem-nav-breadcrumb-link">Shop</a>
     <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/gratuity" class="ProductItem-nav-breadcrumb-link">Gratuity</a>
    <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/p/custom-dress" class="ProductItem-nav-breadcrumb-link">Custom Dress — Deposit</a>
  </div>

The code will create a bar like this in Additional Info

then repeat #2 for all products

You can edit Category Name/URL - Product Name/URL in the code

Thank you, but that is not what I'm looking for. I'm hoping for the actual breadcrumb to show the category, not an additional note, as the additional note shows underneath the product which does not make sense. See screenshots.

Additionally, the code voided my code for bold text and the bold text is critical 😕 Below is my existing code. Thoughts? I'm starting to think this is simply impossible thanks to Squarespace.

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}
.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link:last-child {
  font-weight: bold;
}
button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
/* show all categories */
@media only screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
		flex-wrap: wrap !important;
		overflow: visible !important;
	}
	.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
		margin-left: 1vw !important;
	}
}

#1. This code will move Breadcrumb from Additional Info to current Breadcrumb position + Hide current breadcrumb

#2. What is problem with the code? Your code is CSS code in Custom CSS box, my code is in Code Injection > Footer code

On 9/22/2023 at 3:00 AM, tuanphan said:

#1. This code will move Breadcrumb from Additional Info to current Breadcrumb position + Hide current breadcrumb

#2. What is problem with the code? Your code is CSS code in Custom CSS box, my code is in Code Injection > Footer code

#1 Unfortunately, that did not happen, as shown by my screenshots.

#2 I was just trying to provide more information in case it would be helpful...won't do that ever again.

Can you keep the code in Code Injection & share link to product where you added Code Block to additional info?