LearnDash Design & Tutorials

LearnDash Design & Tutorials

Hide Course and/or Topic Name in LearnDash Breadcrumbs

Sometimes we use affiliate links. We may be compensated if you use our links to make a purchase. Rest assured, we are extremely selective in who we partner with, and only recommend products we wholeheartedly believe in. Our affiliate relationships do not influence our recommendations.

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,
.learndash-wrapper .ld-focus .ld-quiz-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

8 Comments

  1. Kakybat

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

  2. Jim McCarthy

    Hi Dave-
    Thanks for the article “Hide Topic Name in Breadcrumbs.” I have a question related to this: is it possible to hide some topic name in the left-side menu? My reasoning is that I have subtopics to topics and don’t want them to appear equivalent in the hierarchy to topics. I’d link to them from a topic page but don’t want them available via a menu.
    Thanks-Jim

    • Jim, sorry, but I’m not clear on what you’re trying to do. Can you email me a screenshot or two, preferably annotated, so I can get a better understanding of your setup? dave [at] escapecreative [dot] com

  3. Hi,

    Is it possible to completely remove the breadcrumb in the source code ? Not just hide it.

    Thank you !
    Regards,
    Florian

  4. Hi Dave,

    How do you remove breadcrumbs from the quizzes?

    Your code works great for lessons.

    Richard

    • LearnDash just added the quiz breadcrumbs in version 3.2 they released yesterday. I just updated the code in this article to now include hiding them from quiz pages.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén