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.

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

4 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;
      }

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén