LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Hide Course and/or Topic Name in LearnDash Breadcrumbs

If you have really long course names, it can cause an issue when they are displayed in the LearnDash breadcrumbs, especially in focus mode. And since you can get back to the course page by clicking on the course title in the sidebar navigation, you might want to remove the course name from the breadcrumbs. This article will show you how to do that with CSS.

Example of long course name in LearnDash breadcrumbs

Where to Put the Code

The following CSS should go either in a child theme’s style.css file, or in the “Additional CSS” area of the Customizer (Appearance > Customize).

NOTE
This code is exclusive to the “LearnDash 3.0” active template. It will not work with the “Legacy” template.

Hide Course Name in Breadcrumbs

To hide the course name in the LearnDash breadcrumbs, and only display…

Lesson Name > Topic Name

…use the following CSS:

.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments span:first-child {
	display: none;
}

Hide Topic Name in Breadcrumbs

Another way to deal with long course, lesson or topic names in breadcrumbs is to hide the topic name. You might also just want to hide the topic name because it is typically already displayed as the <h1> title at the top of the page. Most people know that they’re viewing the topic, and don’t need to see it in the breadcrumbs.

To hide the topic name, and only display…

Course Name > Lesson Name

…use the following CSS:

.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments span:nth-child(3) {
    display: none;
}
.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments span:nth-child(2)::after {
    display: none;
}

The first part of this CSS (containing the :nth-child(3)), hides the topic name. The second part (containing the :nth-child(2)::after), hides the little arrow that shows up after the lesson name, since there is no longer a topic to point to.

Hide the Breadcrumbs Entirely

Of course, you could also hide the breadcrumbs entirely. There are two main ways to do this:

Use the following CSS to completely hide the breadcrumbs section in focus mode:

.learndash-wrapper .ld-focus .ld-lesson-status,
.learndash-wrapper .ld-focus .ld-topic-status {
    display: none;
}

If you have any questions about LearnDash breadcrumbs, focus mode or how to make other little LearnDash customizations like this one, please leave a comment below.

Previous

2019 LearnDash Black Friday Deals: Top Plugins, Themes & Hosting

Next

Create a LearnDash Course Page Template with Elementor Pro

2 Comments

  1. Kakybat

    Hi, How to display only the status button?(in progress/completed)

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén