Jump to content

Change the Product Breadcrumbs Padding

Recommended Posts

Hi!

Does anyone know how to alter the heading of the padding on the product 514933221_Annotation2020-08-25215727.thumb.jpg.29482775c07b780f9a7508ac6fd8d9cc.jpgs?

I like the feature but it doesn't need to take up anywhere near that much space on the page. I'd like it to just be barely larger than the text.

Many thanks in advance!

Link to comment

I've been playing around with the CSS seeing if I could jostle free a few of the brain cells I had last time I played with it over 10 years back and to my surprise I managed to figure it out that way.

I'm not sure its the Right way to do it but the code I used was 
 

/* Change Top Breadcrumb Size */
h3.nested-category-title {
    font-size: 40px !important;
    padding-top: 5px !important;
    padding-bottom: 7px !important;
}
.collection-content-wrapper {
      padding-top: 10px !important;
}

.nested-category-breadcrumb {
    font-size: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

 

This Also changes the font sizes of the product title and breadcrumb FYI.

Link to comment
  • 2 years later...
20 hours ago, markadekoning said:

Hey @tuanphan,

I am having trouble with this on 7.1. As you can see there isn't enough padding above the breadcrumb links.

Any ideas?

Thanks!

Screenshot 2023-03-16 at 4.42.53 pm.png

If you share link to a product, we can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, markadekoning said:

Any product is fine.

 
Password: Thehomecollective
 
Thanks!

Add to Design > Custom CSS

/* Product breadcrumbs */
nav.ProductItem-nav {
    padding-top: 100px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 11/18/2023 at 12:52 PM, LucyBold said:

Hello @tuanphan,
I will also like to adjust the spacing below the breadcrumbs. The spacing between the breadcrumbs and the product image. Is it possible? thanks in advance

Can you share link to product on your site?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

@tuanphan - Thank you so so much!! I've just used your code this morning and it worked perfectly. By default, by breadcrumbs had been positioned in the upper left corner of my Header. Didn't matter which layout option I used for my products. I now have it re-positioned below my header, where you'd expect to see it. 

Link to comment
11 hours ago, ErinJacob said:

@tuanphan - Thank you so so much!! I've just used your code this morning and it worked perfectly. By default, by breadcrumbs had been positioned in the upper left corner of my Header. Didn't matter which layout option I used for my products. I now have it re-positioned below my header, where you'd expect to see it. 

No problem. If you have any other problems, just reply to this thread, I will check.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.