Change breadcrumbs background color to the same color of my page

[INKLY]

Hi,

does anyone know how I can change the bacgkround of the breadcrumbs on my product page. I would like it to be beige like the rest of the page. The section only allows me to use custom CSS. Thank you for your help. 

Best regards,

Store URL: https://servicedetable.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=165496979784

[Moeed · Accepted solution]

Hey @INKLY 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
nav.breadcrumb.breadcrumbs--default.inherit {
    background: #FCFAF6 !important;
    max-width: 100% !important;
    padding-left: 22% !important;
}
}
nav.breadcrumb.breadcrumbs--default.inherit {
    background: #FCFAF6 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[INKLY]

Works great thank you !

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Tech_Coding]

Hello @INKLY 

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>
  .breadcrumbs__wrapper .breadcrumb{
     max-width: 100% !important;
     background: #fcfaf6 !important;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

Hi @INKLY 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.breadcrumbs__wrapper .breadcrumb {
    background: #fdfaf6;
}