Focus Mode: Only Show the Current Lesson in Navigation

On February 23, 2021

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

CSS Focus Mode

9 Comments

Add Comment →

SARAI DOMINGUEZ

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

Thanks!

April 3, 2021

Reply
- 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.
  
  April 3, 2021
- 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' );
  November 10, 2021
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.

June 5, 2023

Reply
- 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.
  
  June 5, 2023
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?

August 21, 2023

Reply
- 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.
  August 21, 2023
- 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;
  }
  
  August 22, 2023
- Dave Warfel
  
  Nice job! 🙌
  
  August 24, 2023