How to Change Breadcrumb Colors Based on Active Collection

[MudassirMehmood]

Hi everyone,

I need some assistance with styling the breadcrumbs in my Shopify store. Specifically, I’d like the active breadcrumb (the current collection or product) to appear in black (#000000), while all the other non-active breadcrumbs should appear in a lighter color (#eae9e7).

For example, in the following breadcrumb trail:

Home / Appliances / Kitchen Appliances / Hand Mixer

When viewing the Hand Mixer product, I want "Hand Mixer" to be styled in black, while "Home", "Appliances", and "Kitchen Appliances" should all be displayed in #eae9e7.

Has anyone implemented this type of styling, or does anyone know the best approach to achieve this?

Thanks in advance for your help!

like this Active collection color bright
and other are light

 

[nidhidhiman004 · Accepted solution]

hi @MudassirMehmood 

please add this code

breadcrumb .active {
color: "#000 (Add color code here)"
}

theme.css or base .css

It will work in theme.liquid also by adding style tag

please mark it as a acceptable solution if it really helpful you

[Dan-From-Ryviu · Accepted solution]

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

a.breadcrumbs_link {
color: #eae9e7;
}
.breadcrumbs__item { color: #000; }

[EBOOST · Accepted solution]

Hi @MudassirMehmood ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

.breadcrumbs__list li:after, 
.breadcrumbs__list li > * {
  color: #eae9e7;
}

.breadcrumbs__list li:last-child > * {
  color: #000;
}

[BSSCommerce-B2B · Accepted solution]

@MudassirMehmood,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.breadcrumbs__list .breadcrumbs_item,
.breadcrumbs__list .breadcrumbs_link {
   color: #eae9e7!important
}
.breadcrumbs__list .breadcrumbs__item {
   color: #000000!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[nidhidhiman004 · Accepted solution]

hi @MudassirMehmood 

please add this code

breadcrumb .active {
color: "#000 (Add color code here)"
}

theme.css or base .css

It will work in theme.liquid also by adding style tag

please mark it as a acceptable solution if it really helpful you

[Dan-From-Ryviu]

Could you share your store link so I can check?

[MudassirMehmood]

https://80fc54-2.myshopify.com/collections/pet-vacuums

[Dan-From-Ryviu · Accepted solution]

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

a.breadcrumbs_link {
color: #eae9e7;
}
.breadcrumbs__item { color: #000; }

[MudassirMehmood]

Breadcrumb Display Issue on Mobile After Refresh

https://community.shopify.com/c/shopify-design/breadcrumb-display-issue-on-mobile-after-refresh/m-p/...

[EBOOST · Accepted solution]

Hi @MudassirMehmood ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

.breadcrumbs__list li:after, 
.breadcrumbs__list li > * {
  color: #eae9e7;
}

.breadcrumbs__list li:last-child > * {
  color: #000;
}

[MudassirMehmood]

Breadcrumb Display Issue on Mobile After Refresh

https://community.shopify.com/c/shopify-design/breadcrumb-display-issue-on-mobile-after-refresh/m-p/...

[BSSCommerce-B2B · Accepted solution]

@MudassirMehmood,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.breadcrumbs__list .breadcrumbs_item,
.breadcrumbs__list .breadcrumbs_link {
   color: #eae9e7!important
}
.breadcrumbs__list .breadcrumbs__item {
   color: #000000!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[MudassirMehmood]

When the breadcrumb link hovers only the text-decoration changes color to black but I want both text-decoration and text.  Change color to black on hover

[BSSCommerce-B2B · Accepted solution]

@MudassirMehmood, change the previous code like this 

<style>
.breadcrumbs__list .breadcrumbs_item,
.breadcrumbs__list .breadcrumbs_link {
   color: #74767c!important
}
.breadcrumbs__list .breadcrumbs__item,
.breadcrumbs__list .breadcrumbs_item:hover,
.breadcrumbs__list .breadcrumbs_link:hover {
   color: #000000!important
}
</style>

Result:

Hope it helps you 😊

[MudassirMehmood]

Please bother short this style code with same working

<style>
li.breadcrumbs_item {
display: inline-block !important;
}
li.breadcrumbs_item:not(:last-child):after {
content: '';
display: inline-block !important;
margin: 0 .20em !important;
position: relative !important;
vertical-align: middle !important;
border-style: solid !important;
border-width: .10em .10em 0 0 !important;
height: .30em !important;
width: .30em !important;
transform: rotate(45deg) !important;
top: -0.1em !important;
margin-left: 5px !important;
margin-right: 8px !important;
}
.breadcrumbs__item:not(:last-child):after {
{% if section.settings.separator_shape == 'slash' %}
content: '/';
margin-left: 1.0em;
{% endif %}
}

.breadcrumbs__list .breadcrumbs_item,
.breadcrumbs__list .breadcrumbs_link {
color: #74767c!important
}
.breadcrumbs__list .breadcrumbs__item,
.breadcrumbs__list .breadcrumbs_item:hover,
.breadcrumbs__list .breadcrumbs_link:hover {
color: #000000!important
}
.breadcrumbs__list {
list-style-type: none;
margin: 5px;
padding: 0;
font-size: 15px;
}
.breadcrumbs_link:hover {
text-decoration: underline;
text-color: #000000;
text-underline-offset: 0.3rem;
text-decoration-color: #000000;
}
@media (min-width: 1025px) {
.page-width {
max-width: 1600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
}
.breadcrumbs {
padding-top: 15px;
padding-bottom: 15px;
}
.breadcrumbs__list {
list-style-type: none;
margin: 5px;
padding: 0;
font-size: 15px;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs_link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: none;
text-underline-offset: 0.3rem;
color: #000000;
/font-size: 1.4rem;/
font-family: inherit;
}
#breadcrumbs-divider {
display: block;
height: 1px;
background-color: #eae9e7;
}
</style>

[BSSCommerce-B2B]

You can't reduce the code because it can't be shorter. If you see it's too long in your theme.liquid file please add it to the end of base.css file

li.breadcrumbs_item {
display: inline-block !important;
}
li.breadcrumbs_item:not(:last-child):after {
content: '';
display: inline-block !important;
margin: 0 .20em !important;
position: relative !important;
vertical-align: middle !important;
border-style: solid !important;
border-width: .10em .10em 0 0 !important;
height: .30em !important;
width: .30em !important;
transform: rotate(45deg) !important;
top: -0.1em !important;
margin-left: 5px !important;
margin-right: 8px !important;
}
.breadcrumbs__list .breadcrumbs_item,
.breadcrumbs__list .breadcrumbs_link {
color: #74767c!important
}
.breadcrumbs__list .breadcrumbs__item,
.breadcrumbs__list .breadcrumbs_item:hover,
.breadcrumbs__list .breadcrumbs_link:hover {
color: #000000!important
}
.breadcrumbs_link:hover {
text-decoration: underline;
text-color: #000000;
text-underline-offset: 0.3rem;
text-decoration-color: #000000;
}
@media (min-width: 1025px) {
.page-width {
max-width: 1600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
}
.breadcrumbs {
padding-top: 15px;
padding-bottom: 15px;
}
.breadcrumbs__list {
list-style-type: none;
margin: 5px;
padding: 0;
font-size: 15px;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs_link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: none;
text-underline-offset: 0.3rem;
color: #000000;
font-family: inherit;
}
#breadcrumbs-divider {
display: block;
height: 1px;
background-color: #eae9e7;
}

And remain this one in theme.liquid

<style>
.breadcrumbs__item:not(:last-child):after {
{% if section.settings.separator_shape == 'slash' %}
content: '/';
margin-left: 1.0em;
{% endif %}
}
</style>

[MudassirMehmood]

In mobile when we refresh the page or go to the child category from the parent 
breadcrumbs show from 
Home > Appliances > Vacuums, Steamers & Floor Care > Robot Vacuums
Due to this on mobile after refreshing it hide  Active category
But i want that after refreshing i may hide Home > Appliances (Parent Category)
not the Robot Vacuums (Active Category)

Default After refreshing the page

 

But I want to show Breadcrumbs show like this. I mean don't hide active category on refreshing
I want to show like this on refreshing

 

[MudassirMehmood]

https://community.shopify.com/c/shopify-design/breadcrumb-display-issue-on-mobile-after-refresh/m-p/...