Breadcrumbs appearring as numbered list, Taste theme

[JMGlass]

I set up breadcrumbs using this shopify tutorial https://community.shopify.com/c/shopify-design/how-to-add-breadcrumb-navigation-to-your-shopify-stor... 

I have breadcrumbs but they appear as a numbered list rather than home > bee sippers > opaque glass bee sipper decoration

The shop  is joymcmillanglass.co.uk and I'm using the taste theme

Could anyone tell me how to fix this?

Many thanks

[topnewyork]

Hi @JMGlass , I can see the breadcrumbs in my browser. Have you fixed it yourself?

[JMGlass]

Thank you - that isn't what I'm seeing. I'm getting the drop down list in the photo. I'm also getting the same numbered list when I use incognito mode to view the website and when I look at it on iphone.

[Tech_Coding]

Hello @JMGlass 

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.breadcrumbs ol {
     list-style-type: none !important;
  }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[JMGlass]

Thank you - that got rid of the numbers but I still have a list. 

[Tech_Coding]

Replace the code with below code:

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.breadcrumbs ol {
      list-style-type: none !important;
      display: flex !important;
      justify-content: start !important;
      align-items: center !important;
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[JMGlass]

Thank you - I've now got all the categories in a line but the words run into each other so I need to add a space between each section of text.

[Tech_Coding · Accepted solution]

Replace the code with below code:

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.breadcrumbs ol {
      list-style-type: none !important;
      display: flex !important;
      justify-content: start !important;
      align-items: center !important;

      column-gap:15px; /*adjust according to you*/ 
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[JMGlass]

Thank you so much - that's perfect.

[mOONbOOTS]

Hey @JMGlass,

This should do the trick.

Paste this code at the end of your base.css file:

/*breadcrumb*/
.breadcrumb {
  font-size: 14px;
  margin-bottom: 20px;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Ensure it wraps on small screens */
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
}

.breadcrumb a {
  text-decoration: none;
  color: #007bff; /* Adjust color as needed */
}

.breadcrumb span {
  color: #333; /* Adjust color as needed */
}
.breadcrumb {
  width: 100%; /* Make the breadcrumb container take up the full width of the page */
  margin: 20px 0; /* Adjust top and bottom margins as needed */
  padding: 10px 0; /* Optional: Add padding for better spacing */
  box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

.breadcrumb ol {
  max-width: 1600px; /* Set a max-width to match your site's content width */
  margin: 0 auto; /* Center the breadcrumb content within the full-width container */
  padding: 0 20px; /* Optional: Add padding for content spacing */
  display: flex;
  list-style: none;
}