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
hi @MudassirMehmood
please add this code
breadcrumb .active {#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
1 Like
Could you share your store link so I can check?
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
a.breadcrumbs_link {
color: #eae9e7;
}
.breadcrumbs__item { color: #000; }
1 Like
EBOOST
October 17, 2024, 7:05am
6
Hi @MudassirMehmood ,
May I suggest to update code these steps:
Go to Store Online-> theme → edit code
Assets/base.css
Add code below to end of file
.breadcrumbs__list li:after,
.breadcrumbs__list li > * {
color: #eae9e7;
}
.breadcrumbs__list li:last-child > * {
color: #000;
}
1 Like
@MudassirMehmood ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
Result:
If it helps you, please like and mark it as the solution.
Best Regards
1 Like
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
@MudassirMehmood , change the previous code like this
Result:
Hope it helps you
1 Like
Please bother short this style code with same working
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;
}
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
In mobile when we refresh the page or go to the child category from the parent
Default After refreshing the page
But I want to show Breadcrumbs show like this. I mean don’t hide active category on refreshing
