LDX Design
Free SVG Patterns by SVGBackgrounds.com

LearnDash Focus Mode: Only Show the Current Lesson in Navigation

By

On February 23, 2021

In Tutorials

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.

Someone recently asked if they could hide all the lessons in the LearnDash Focus Mode navigation, and show only the current lesson. I never thought anyone would want this type of set up, but apparently, some find it useful.

I was able to write some CSS to achieve it, but there is one small caveat.

Caveats

  • If you’re using section headings in the course builder, you’ll need some additional CSS to hide them. I’ll provide that here, just know that they will need to be hidden otherwise it will just look silly 🤪.
  • It might be possible to do this with topics, but I haven’t tried. Honestly, I can’t see the value in hiding the parent lessons, as well as the other topics in the lesson, and only showing a single topic.
Showing only current lesson in LearnDash focus mode

The CSS

First, we need to hide all lessons. Then we’ll target only the current lesson, and display it. 

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
	display: none;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item.ld-is-current-lesson {
	display: block;
}

This will take into consideration any topics and/or quizzes that are part of the lesson. They will all be shown, under the lesson, as usual. But this also works great if all you have are a bunch of lessons (no topics/quizzes).

Hiding Sections

As mentioned in the caveats above, if you’re using section headings, they will all be visible… which will look weird with most of your lessons hidden. Use this additional CSS to hide them. 

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading {
	display: none;
}

And that’s how you hide all lessons except the current one in LearnDash Focus Mode. 👍

Previous

LearnDash Focus Mode: Sticky Header on Mobile

Next

How to Customize the LearnDash Notifications Subscription Page

9 Comments

Add Comment →

  1. SARAI DOMINGUEZ

    Thank you for your tutorial! I have a question: How would you hide just the quizzes from the navigation menu?

    Thanks!

    •

      Dave Warfel

      Hi Sarai – I don’t think you can. LearnDash doesn’t apply any special class names to the quizzes so there’s no way to target them. They have the same class names as lessons do.

      Although, why would you want to hide all quizzes? You can simply just not add them to the course builder in the first place.

    • LaZZa

      I just stumbled across this post while digging into the LearnDash sidebar code. There is a filter you can use to disable quizzes: ld-focus-mode-navigation-settings

      Something like this added to your functions.php file might do it…but i didn’t test it as i don’t have any quizzes to test with:

      function dont_show_quizes( $arr ) {
 $arr = array(
  'show_lesson_quizzes' => false,
  'show_topic_quizzes'  => false,
  'show_course_quizzes' => false,
);
    return $arr;
}
add_filter( 'ld-focus-mode-navigation-settings', dont_show_quizes' );

  2. John

    thanks, I am interested in just minimizing the sidebar for topics in focus mode. By default is is displayed in expanded mode, taking up space on the screen that I would like to make available to the content of the topic.

    •

      Dave Warfel

      Hi John,

      There should be a way to do this with a little custom JavaScript. I don’t have the time right now to look into it, but a decent JavaScript developer who is somewhat familiar with LearnDash should be able to do this for you for a nominal fee.

  3. Brenda

    I am looking to hide only lessons that have a specific word in them, .i.e “Attendance”. Is There a CSS to hide based on a word in the title or alternatively a specific lesson ID?

    •

      Dave Warfel

      Not a specific word, but you might be able to use CSS to hide a lesson by its ID. I’m not sure if LearnDash outputs the lesson ID in the code for focus mode sidebar links, but if they do, you could hide that way. This video shows you how to look in the code for the ID.

      Then you would use a CSS attribute selector. Something like this:

      [id~="lesson-id-1234"] {
  display: none;
}

      Here’s an article explaining how CSS attribute selectors work.

    • Brenda

      Thank you! You are right the focus mode sidebar does not have the lesson IDs. What I was able to do was use reference to the child lessons in the list. A little sloppy but it worked.

      #ld-lesson-list-#### > div:nth-child(8){
      display: none;
      }

Leave a Reply

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