Breadcrumb styling

[ChrisW3]

Can someone fix the breadcrumb styling on our product page please:

Mobile:

Desktop:

Currently the font is too small, it is too close to left margin, the chevrons are duplicated.

Current CSS:

/* Container styling */

.breadcrumb-wrapper {

margin: 20px 0;

padding-left: 30px; /* more left margin */

font-size: 16px; /* matches product title font size approximately */

color: #333;

}

/* Breadcrumb list styling */

.breadcrumbs {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-wrap: wrap;

}

/* Breadcrumb item styling */

.breadcrumbs__item {

margin-right: 10px;

display: flex;

align-items: center;

}

/* Breadcrumb link styling */

.breadcrumbs__link {

color: #007bff;

text-decoration: none;

font-weight: normal;

transition: color 0.3s ease;

position: relative;

padding-right: 10px; /* space for chevron */

}

/* Hover effect for breadcrumb links */

.breadcrumbs__link:hover {

color: #0056b3;

text-decoration: underline;

}

/* Chevron separator: only for links except the last one */

.breadcrumbs__item:not(:last-child) .breadcrumbs__link::after {

content: ‘›’;

margin-left: 5px;

color: #6c757d;

}

/* Current page styling */

.breadcrumbs__item:last-child .breadcrumbs__link {

color: #6c757d;

pointer-events: none;

text-decoration: none;

}

[tim_1]

For starters, you can wrap your code with another element, like this:

<div class="wrapper">
 <ul class="breadcrumbs">
  <!-- Home -->
  .  .  .
 </ul>
</div>

Then remove this code – you already have code for chevron elsewhere (?)

/* Chevron separator: only for links except the last one */

.breadcrumbs__item:not(:last-child) .breadcrumbs__link::after {
  content: ‘›’;
  margin-left: 5px;
  color: #6c757d;
}

[AiTrillion]

Hi @ChrisW3 ,

I hope you are well!

Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.breadcrumbs {
margin-left: 35px;
}

This will move the breadcrumb littile bit to the margin left.

On mobile view

[ChrisW3]

@AiTrillion

.breadcrumbs {
margin-left: 35px;
}

Fine on desktop now, mobile a bit messy.

Need it on one line ideally, so less space between the chevrons

[AiTrillion]

Okay! To fix it, please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media (max-width: 768px) {
.breadcrumbs {
flex-wrap: nowrap !important;
}
}

This will fix on mobile device

[WebDeskSolution]

Hello @ChrisW3

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.

• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Insert the provided CSS code at the bottom of your given css code to save the changes.

.breadcrumbs
{
    padding: 20px 30px;
}
.breadcrumbs .breadcrumbs__item .breadcrumbs__link
{
    color: #00aeef;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    padding-right: 0;
}
.breadcrumbs .breadcrumbs__item .breadcrumbs__link:hover
{
    color: #3dcaff;
    text-decoration: underline;
}
.breadcrumbs .breadcrumbs__item:last-child .breadcrumbs__link
{
    color: #000;
}
.breadcrumbs .breadcrumbs__item:not(:last-child):after
{
    width: 10px;
    height: 10px;
}
.breadcrumbs .breadcrumbs__link:after
{
    display: none;
}

@media (max-width: 768px)
{
 .breadcrumbs
   {
        padding: 20px;
    }   
}