Breadcrumbs box shading

[Shane_h]

Hi wonder if anyone can help - i have tried 3 solutions from this board none of which worked and they all involved changing the theme liquid above the head

we are trying to change the background colour of the breadcrumbs box in the code

any suggestions welcome url and picture here https://kitout-fitness.co.uk/collections/crossfit-chiltern/products/womens-vest

thanks

[Darshan17]

Hi Shane

Would you like to do like this ?

Thanks!

[Shane_h]

no sorry a full bar all the way across and change text to white thanks

[Darshan17]

like this ?

[BiDeal-Discount]

Hi @Shane_h

you can change any color as you want here:

.dynamic-page-width.breadcrumbs{
      background: antiquewhite;
}

[Shane_h]

yes please but black

[Darshan17]

If yes

then follow this

1. Log in to your Shopify Admin Panel#### 2. Navigate to Online Store → Themes- In the left sidebar, click “Online Store”.

• Under “Themes”, you’ll see your current live theme.

3. Click “Actions” → “Edit Code”- Next to your active theme, click the “⋯ (three dots)” or “Actions” button.

• Select “Edit Code” from the dropdown.

4. Locate the Stylesheet- Look in the Assets folder.

• Find a file named something like:

  • styles.css

• Click on it to open the file in the code editor.

5. Add Your CSS Code- Scroll to the bottom of the CSS file.

• Paste your custom CSS code:

  li.item.slider__slide {
      color: white;
  }
  .slider.slider--desktop { 
   background: #000000;
   }
  
  .breadcrumbs > ul > li .arrow {
      border-color: #fff;
  }
  

6. Save the File- Click the “Save” button (usually at the top right of the editor window).

7. Clear Cache and Preview

[Darshan17]

check my new comment.

[BiDeal-Discount]

Hi @Shane_h

let try this:

.dynamic-page-width.breadcrumbs {
  background: black;
}
.dynamic-page-width.breadcrumbs > ul > li {
  color: white;
}
.dynamic-page-width.breadcrumbs > ul > li .arrow{
  border-color: white;
}

the result will be:

[Darshan17]

Hi shane,

for white arrow

.breadcrumbs > ul > li .arrow {
    border-color: #fff !important;
}

Thanks!

[Shane_h]

Is it possible to make it full width of the screen like the header bar ?

thanks

[Shane_h]

we need it to fill the screen on full width

[BiDeal-Discount]

Let try it:

#shopify-section-sections--23664574628169__breadcrumbs,
.dynamic-page-width.breadcrumbs {
  background: black;
}
.dynamic-page-width.breadcrumbs > ul > li {
  color: white;
}
.dynamic-page-width.breadcrumbs > ul > li .arrow{
  border-color: white;
}

result:

[Shane_h]

its worked to a degree but the > symbols are not on the same level as the breadcrumbs it’s in your image as well

[BiDeal-Discount]

@Shane_h

let try this:

#shopify-section-sections--23664574628169__breadcrumbs,
.dynamic-page-width.breadcrumbs {
  background: black;
}
.dynamic-page-width.breadcrumbs > ul > li {
  color: white;
}
.dynamic-page-width.breadcrumbs > ul > li .arrow{
  border-color: white;
  top: 45%;
}

result:

[Shane_h]

perfect - one last question can we reduce the height of it please ?

[BiDeal-Discount]

let try this one @Shane_h

#shopify-section-sections--23664574628169__breadcrumbs,
.dynamic-page-width.breadcrumbs {
  background: black;
}
.dynamic-page-width.breadcrumbs > ul > li {
  color: white;
  padding-block: 0;
}
.dynamic-page-width.breadcrumbs > ul > li .arrow{
  border-color: white;
  top: 45%;
}

result:

[Shane_h]

perfect thanks

[Shane_h]

thanks for your support with this as well