Breadcrumbs appearring as numbered list, Taste theme

Store Design
7

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