Breadcrumbs appearring as numbered list, Taste theme

Topic summary

Issue: After adding breadcrumb navigation via a Shopify tutorial on the Taste theme, breadcrumbs rendered as a numbered/ordered list and as a dropdown, instead of inline links like Home > Category > Product. Breadcrumbs = a navigational trail showing page hierarchy.

Reproduction/visibility: One responder saw normal breadcrumbs, but the store owner consistently saw the issue across browsers, incognito, and iPhone, suggesting a styling problem rather than content.

Fix attempts and changes:

  • Removed numbers by adding CSS in theme.liquid: target nav.breadcrumbs ol with list-style-type: none.
  • Made items inline by adding display: flex and alignment to nav.breadcrumbs ol.
  • An alternative solution proposed styling .breadcrumb in base.css with li + li::before to insert “>” separators.

Final adjustment and outcome:

  • Added column-gap: 15px to nav.breadcrumbs ol to space items, resolving words running together.
  • Result: Breadcrumbs now display in a single line with proper spacing; issue resolved. Images were shared to illustrate the numbered list and the final layout.
Summarized with AI on December 19. AI used: gpt-5.

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