Re: Breadcrumbs appearring as numbered list, Taste theme

Solved

Breadcrumbs appearring as numbered list, Taste theme

JMGlass
Tourist
7 0 0

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

 

JMGlass_0-1725865710665.png

 

 

 

Accepted Solution (1)
Tech_Coding
Shopify Partner
384 106 90

This is an 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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 9 (9)

topnewyork
Globetrotter
633 114 123

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

 

topnewyork_0-1725866403486.png

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
JMGlass
Tourist
7 0 0

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
Shopify Partner
384 106 90

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
JMGlass
Tourist
7 0 0

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

JMGlass_0-1725869864570.png

 

Tech_Coding
Shopify Partner
384 106 90

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
JMGlass
Tourist
7 0 0

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.

 

JMGlass_0-1725955547565.png

 

Tech_Coding
Shopify Partner
384 106 90

This is an 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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
JMGlass
Tourist
7 0 0

Thank you so much - that's perfect.

mOONbOOTS
Explorer
75 6 10

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