LearnDash Design & Tutorials

LearnDash Design & Tutorials

Remove Scrollbar When 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 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.


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.

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

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

Next

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

6 Comments

  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.

    Thanks!

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

    Regards,
    Jonathan

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

Powered by WordPress & Theme by Anders Norén