LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

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

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

LearnDash Focus Mode: Sticky Header on Mobile

Next

How to Customize the LearnDash Notifications Subscription Page

3 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' );

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén