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.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App →

Previous

Build Custom Styles for LearnDash Quiz Questions

Next

Create a LearnDash Course Page Template with Elementor Pro

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

  9. Desiree

    I found the css code for the course-grid-title. But how can I change the course title at a courepage?

    • Hi Desiree — That depends on the theme you’re using, and/or a page builder, if one is in use. I’d need a link to your site to be able to help you with the code. You can email me at [email protected] or post the link here.

  10. Hey Dave,

    Amazing content mate, thankyou for sharing!

    I’d love to ask how to hide the breadcrumbs via Additional CSS when not using the focus mode? It doesn’t appear to apply. Have been using Design Upgrade Pro as well with no luck.

    Appreciate your work,
    Ryan

    • Hi Ryan – Sure. Just use this CSS to completely hide the breadcrumbs. This works even without Focus Mode.

      .learndash-wrapper .ld-breadcrumbs {
      	display: none;
      }
  11. I am Using OceanWP. I wanted to get rid of my course Titles.

    • Are you looking for help on how to do that?

      I think OceanWP has options on all course pages to hide the title. Look in the right sidebar for those options. If it’s there, just check the box to hide the title.

      The other way would be to use some custom CSS to hide them visually.

  12. None of the options to change the title works for the course titles. They seem to be their own independent thing.

    • I just tested this. What OceanWP calls their “page title” in the individual course options is actually the grey bar that they use at the top of pages & posts. It doesn’t even get displayed on course pages, so disabling the “page title” will do nothing.

      If you want to remove the page titles from ALL post types (posts, pages, courses, etc.), you can do that in the Customizer. Go to Appearance > Customize > Blog > Single Posts and click on the eye icon for “Title.” This will remove the actual page title that shows up on all course pages, but it will also remove it from everywhere else.

  13. Hello there, i need to hide the mark as complete button and the navigation buttons aswell by using css, i already used this tutorial to hide the status and progress bar. Is this a possibility?

    • Hi Leandro – Yes, this is absolutely doable but I don’t have time right now to write the CSS for you. Any CSS developer should be able to do this for you in 5-10 minutes.

  14. Hi Dave,

    I am using elementor pro, LearnDash and astra theme. I have two questions.

    1. How do i remove the page title?

    2. Where or how do i center the text that is show under the picture in the course grid, it is driving me crazy hahaha.

    Thanks so much!

    • Hi Anna – Page title can be removed using a feature of the Astra theme. In the right sidebar of every page, there should be Astra options, one of which is to disable the page title. Just check that box and then save/update the page.

      Use the following CSS to center the text in course grid items:

      .ld-course-list-items .ld_course_grid .thumbnail .caption {
      	text-align: center;
      }

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén