Solved

How can I change breadcrumb color to black in my coding?

meeko
Excursionist
36 0 2

Hey everyone,

 

How to I change the colour of the breadcrumb to black?

 

Its currently blue

breadcrumb.png

 

Store: https://meeko-8476.myshopify.com

Password: Meeko

 

This is my breadcrumb coding below if it helps

 

<style>
.breadcrumbs {
margin: 0 0 2em;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}
.pd_20 {
padding-top: 15px;
}
.breadcrumbs__link {
text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
.breadcrumbs__link_1 {
padding-left: 10px;
}
.breadcrumbs__item.breadcrumbs__link_n a {
padding-left: 10px;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- unless collection -%}
{%- assign p = all_products[product.handle] -%}
{%- assign collection = p.collections | first -%}
{%- endunless -%}
{%- if collection.url -%}
<li class="breadcrumbs__item breadcrumbs__link_n">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}

{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item ">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item breadcrumbs__link_1">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item ">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}

Accepted Solution (1)
Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

the last one is black.If you want it all to be black, change the code to the following

.breadcrumbs__item a{
color:#000000;
}
banned

View solution in original post

Replies 6 (6)

Simonsron
Shopify Partner
699 87 122
.breadcrumbs__item.breadcrumbs__link_n a{
color:#000;
}
banned
meeko
Excursionist
36 0 2

Hi @Simonsron 

Thank you, where do I place this code?

Simonsron
Shopify Partner
699 87 122

Simonsron_0-1674889353137.png

Put under the style tag

banned
meeko
Excursionist
36 0 2

Hi @Simonsron 

 

Unfortunately that didn't work. 

 

Please see below:

breadcrumb.png

 

This is the code I added: 

 

<style>

.breadcrumbs__item.breadcrumbs__link_n a{
color:#000000;
}

.breadcrumbs {
margin: 0 0 2em;
}

 

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

the last one is black.If you want it all to be black, change the code to the following

.breadcrumbs__item a{
color:#000000;
}
banned
meeko
Excursionist
36 0 2

@Simonsron 

 

This worked!!

 

Thank you so much.

 

I hope you have a great day 🙂