LDX Design

Remove Scrollbar When LearnDash Focus Mode Sidebar is Collapsed

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.

In LearnDash, when you collapse the the Focus Mode sidebar navigation, you might still see the vertical scrollbar. This is partly because of the CSS that LearnDash uses for this section, but also partly the responsibility of the browser you’re using, and the settings you have set for your browser.

Regardless, there’s a way to always hide that scrollbar in the LearnDash Focus Mode sidebar when it is collapsed. Here’s the simple CSS to make that happen.

Add this CSS to the Appearance > Customize > Additional CSS panel in your WordPress admin area.

.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	overflow-y: hidden;

This code does two important things:

  1. It only fires when the Focus Mode sidebar is collapsed. It doesn’t work when it’s visible. This is what the .ld-focus-sidebar-collapsed part of the code does.
  2. The overflow-y: hidden; makes sure that all scrollbars are hidden, regardless of the content inside the <div>.

When the sidebar is opened and becomes visible again, LearnDash removes the ld-focus-sidebar-collapsed class and the regular overflow-y value of auto is once again applied, which brings back the scrollbar.

Recommended Product

Uncanny Owl logo
Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

That’s all there is to it. Feel free to leave a comment letting us know if it worked for you, or if you’re still seeing a scrollbar even when the Focus Mode sidebar is closed.


Avatar & Name in a Pill in the LearnDash Focus Mode Header


How to Fix Lessons Changing Order in Course Builder: Disable LearnDash Transients


  1. Hi Dave,
    I asked this in another thread but it may be more relevant here! How do you remove the # Topics in the sidebar, under each lesson name. For example: 5 Topics 3 Quizzes.

    I find it overwhelming for the user experience to navigate.


    • Hi Michael,

      If you just wanted to remove the text but keep the arrow (which you probably should because they’ll need some way to get to the topics/quizzes), you can use this custom CSS:

      .learndash-wrapper .ld-focus-sidebar .ld-expand-button.ld-button-alternate .ld-text {
      	display: none;

      Also, if you’re interested, our Design Upgrade Pro plugin has an option to disable the text & arrow completely, and always display the topics/quizzes beneath all lessons.

  2. Thanks Dave, this is very helpful!

    I’d also like to remove the arrow as well if you could include that in your response?

    (The lesson is a hyperlink which is enough to open to the topics for view on the main page)

    • Gotcha. I see what you’re doing.

      Delete the CSS I just gave you and use this instead:

      .learndash-wrapper .ld-focus .ld-course-navigation .ld-lesson-item-preview .ld-expand-button {
      	display: none;
  3. Hi Dave,

    When I go from lesson to lesson, the navigation sidebar expands and then I have to collapse it on the iPad. Also, the content becomes somewhat misaligned when the navigation sidebar is expanded. How do I prevent the automatic activation of the navigation bar. Any thoughts? Thanks.


    • Unfortunately, the automatic expansion of the navigation bar on tablet/mobile devices is a LearnDash bug. It’s how they’ve coded it. I’m sure there is a way to override the JavaScript they are using, but I don’t know the exact code to use, and it really is something they should address anyway. So definitely submit a ticket to their support team about that.

      As for the content becoming “somewhat misaligned,” that is not normal and likely points to some CSS conflict. I’d need to see your site and exactly what you mean by “somewhat misaligned” to be able to help further.

Leave a Reply

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