LearnDash Design & Tutorials

LearnDash Design & Tutorials

Hide Course and/or Topic Name in LearnDash Breadcrumbs

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we 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

15 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.

  5. Ruth

    Thanks a lot for that article. I was wondering if there is a way to get rid of the breadcrumb “Course Home” in the Navigation widget?
    Thank you so much!

    • Hi Ruth. Sure. Use this CSS:

      .learndash-wrapper .ld-course-navigation .ld-course-navigation-actions .ld-home-link {
          display: none;
      }
  6. Ruth

    Amazing, thank you so so much!!!

  7. Ruth

    Thanks a lot for your help previously – now I was wondering if there is a way to hide the status button? I have successfully hidden the progress bar but it still shows the status in the lessons. That would be fabulous!

    • Hi Ruth. I don’t know what you mean by the “status button.” Can you please share a screenshot that shows what you’re talking about? I’ll try to help again with the CSS.

  8. camille

    Hello,
    How to remove the course title?

    • Are you asking about the course title that is NOT in the breadcrumbs? The main course title at the top of the page? If so, please post a link to your course page. It will depend on what theme you are using.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén