Skip to main content
Best Answer

CSS to change breadcrumb font color?

  • August 29, 2023
  • 4 replies
  • 181 views
Annarose.Peterson
Hero III
Forum|alt.badge.img+7

I thought I was on the right track with changing changing the breadcrumb font size color by using: 

doc-layout-breadcrumbs .breadcrumbs {
    font-size: 14px;
    color: black;
}

This successfully changes the font size, but it keeps that font color white (I’m guessing because it is a link?).  Has anyone been able to successfully change the color of the font on the breadcrumb with CSS?

Best answer by gstager

As they are links…

Have you tried adding an   ‘a’   to your CSS like so…

/** Modify Breadcrumbs **/

doc-layout-breadcrumbs .breadcrumbs a {
    font-size: 14px;
    color: black;
}

/** End Modify Breadcrumbs **/

 

Annarose Peterson (She/Her)
Bfarkas
dandrews
S

4 replies

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • Answer
  • August 29, 2023

As they are links…

Have you tried adding an   ‘a’   to your CSS like so…

/** Modify Breadcrumbs **/

doc-layout-breadcrumbs .breadcrumbs a {
    font-size: 14px;
    color: black;
}

/** End Modify Breadcrumbs **/

 

Greg
Bfarkas
Annarose.Peterson
Hero III
Forum|alt.badge.img+7

Thanks Greg!! ( @gstager )

 

Annarose Peterson (She/Her)
Bfarkas
margretek
Influencer I
  • margretek
  • Influencer I
  • December 17, 2024

Hi, I am doing the same, and the CSS works for the font. But has anyone been able to change the color of the arrows in the breadcrumbs?

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • December 17, 2024

​@margretek - give this a shot and remember to check other areas of the platform to make sure it does not affect unintended areas.

/** Begin Change color of breadcrumb chevrons **/
/** Adjust fill color as desired **/

#doc-layout-breadcrumbs g {
    fill: #000000;
}

/** End Change color of breadcrumb chevrons **/

 

Greg
Terms & ConditionsCookie settingsAccessibility statement