The following articles will explain how to customize LearnDash’s focus mode design & layout. Move the sidebar navigation to the right, adjust the header height, apply different colors and more.
Explore all LearnDash focus mode customizations below.
If you’re using LearnDash’s focus mode, you’ve probably noticed the dropdown menu that appears when you hover over your name/avatar in the top corner. By default, LearnDash dynamically adds “Course Home” and “Logout” links.
Did you know you can add your own custom links to this menu? This article + video will explain how to add links to the LearnDash focus mode dropdown menu.
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.
This will be a quick article with the custom CSS to make the LearnDash focus mode header fixed on mobile. This means the header will be fixed to the top of the screen as the user scrolls.
LearnDash uses a fixed header for focus mode on larger screens, but they disable it on mobile. Here’s how to get it back. We’ll also address tablets.
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.
Phew! That title is a mouthful, huh? Here’s a quick image that illustrates what we’re talking about:
We’re just applying some custom CSS to place the student’s name & avatar in a contained area with a background color (we’re calling it a pill). We’ll discuss the CSS needed to create this affect, and go over a few variations so you can customize it to your liking.
If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the Focus Mode width you set in your LearnDash settings is not being respected. Content is appearing on the page with a very small width, as opposed to taking up the full screen or full width of the content area.
This article will explain all the issues we’ve found with Divi & LearnDash, and provide solutions for fixing them.
There are a few questions I routinely get about the LearnDash focus mode header. I’ve previously explained how to use a custom height for the focus mode header, as well as move the focus mode sidebar to the right. In this article, we’ll take a look at applying your own background color to the entire LearnDash focus mode header area.
I’ve had a few users ask if they can change the height of the header in LearnDash’s Focus Mode. The answer is yes, and this tutorial will provide the exact CSS you need to use.
Powered by WordPress & Theme by Anders Norén
How to Change the “Leave a Comment” Title in Focus Mode
By Dave Warfel
On October 15, 2020
In Tutorials
If you’ve enabled comments in Focus Mode, the default title that appears before the comment box reads, “Leave a Comment.” This works fine for traditional blogs but it doesn’t always make sense for a LearnDash lesson or topic.
This article will show you how to use custom text instead of “Leave a Comment.”
Read More