Customize LearnDash Breadcrumb Styles

Updated 6 months ago
by Dave Warfel

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.

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.