Customize LearnDash Breadcrumb Styles

When viewing any lesson, topic, or quiz, LearnDash displays breadcrumbs at the top of the page to indicate where you are in the course, and provide links to navigate back to a lesson or a course page.

This article will explain how to edit the design of the LearnDash breadcrumbs, including background color, text color, links and more.

Breadcrumbs Background & Text Color

Use the following CSS to change the background and/or text color of the breadcrumbs.

NOTE
Text color will only change the greater than signs (>) separating each link. I’ll explain how to customize the link styles below.

.learndash-wrapper .ld-breadcrumbs {
	background: #000;
	color: #fff;
}

The background property changes the background color and the color property changes the text color.

You can also change the background to transparent if you don’t want to use any color.

Breadcrumbs Link Color

To change the color of the LearnDash breadcrumb links, use the following CSS:

.learndash-wrapper .ld-breadcrumbs a {
	color: red;
}
.learndash-wrapper .ld-breadcrumbs a:hover {
	color: teal;
	text-decoration: underline;
}

• Replace red and teal with whatever color values you’d like.
• The second part that contains the :hover will denote the color when the link is in its hovered state.
• The text-decoration: underline; is optional. It will add an underline on hover.

Breadcrumbs Status Indicators

The LearnDash breadcrumb area also contains status indicators: In Progress or Complete. You can change the background & text colors of these as well.

In Progress Indicators

.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress {
	background: #000;
	color: #fff;
}

Complete Indicators

.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete {
	background: #000;
	color: #fff;
}

Again, you can use transparent for background, if you’d like.