Add Spacing on Breadcrumb and how to add styling on Breadcrumb

[hamzaabbas]

How to Add Spacing on Breadcrumb and how to add styling on Breadcrumb. There is two Breadcrumbs, i want to remove one breadcrumb on specific pages.

https://www.tridentproducts.co.uk/products/deal-town-rangers-kids-waterproof-insulated-jacket

[Tech_Coding]

Hello @hamzaabbas 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .product-details .breadcrumb {
     display: none !important;
   }
  .breadcrumb {
      padding: 35px 7px 7px !important;
      display: flex;
      gap: 4px;
  }
</style>

Result:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[hamzaabbas]

when i use this code

.product-details .breadcrumb {
     display: none !important;

It removes both breadcrumbs.

[Tech_Coding]

Hello @hamzaabbas 

add this below code in place of this code 
.product-details .breadcrumb {
     display: none !important;

 }

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

   nav.breadcrumb.breadcrumb-left {

      display: none  !important;

   }

</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[ZestardTech · Accepted solution]

Hello @hamzaabbas 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-details .breadcrumb {
display: none !important;
}
.breadcrumb {
padding: 35px 7px 7px !important;
display: flex;
gap: 4px;
}