LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Change the LearnDash Focus Mode Header Height

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.

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.

NOTE
Did you know you can also change the background color for the focus mode header? See how →

Can I Use a Different Header Altogether?

You cannot use a different header for focus mode. Once you enable focus mode, LearnDash takes over the layout of all lesson, topic & quiz pages. You cannot use other elements from your theme or a page builder.

Well, technically, you probably could. But it would require a lot of work & custom code. You’d have to remove the default focus mode header from a LearnDash template file, then create a new one using a page builder, then use a LearnDash hook to insert the code to display the header template you created in your page builder, and then write some custom CSS to make sure it fit properly with the navigation & content… 🤯.

Yeah, so we just aren’t going to entertain that option right now.

How to Change LearnDash Focus Mode Header Height

This can be done solely using custom CSS. I’ll include the full CSS below, but first, let me explain a few things.

NOTE
This might not work without the Design Upgrade plugin active. It will work with both free & pro versions, but if you’re not running either, it might not work.

Variable to set header height

The first bit of CSS will set a variable that we’ll use throughout the code. Here is where you set the height you want to use in pixels. In the example below, I have it set to 65px.

WARNING
If you go over 100px with your header height, you might need some additional CSS to account for spacing at the top of the focus mode content area. In my opinion, 100px is too big for the header, so I’m not going to cover that CSS here.

Apply to Larger Screens

LearnDash applies different styles to the focus mode header on smaller screens (less than 768px wide). We’re going to apply this custom header height only to screens 768px wide and larger because we don’t want to mess with the custom mobile styles that LearnDash is using.

In the code below, you’ll see I’ve wrapped most of it inside a media query that looks like this:

@media (min-width: 768px) { ... }

Circle vs. Square Avatar

If you’re using the Design Upgrade Pro for LearnDash plugin, you have the option of using either a circle or square for the avatar in the top-right corner. I’ve included the CSS below for both options, but you should only use the code that corresponds to the shape you’re using. Please delete the code you are not using.

Sidebar Navigation Position

The last line of code helps adjust the sidebar so it doesn’t get cut off by the new, taller header height. We simply set the padding-top to use our header height CSS custom property.

Here’s the CSS:

:root {
	--ld-focus-mode-header-height: 65px;
}

@media (min-width: 768px) {

.learndash-wrapper .ld-focus .ld-focus-header,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action,
.learndash-wrapper .ld-focus .ld-focus-header .ld-button,
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress {
	height: var(--ld-focus-mode-header-height);
}

// If using circle avatar
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-profile-avatar {
	width: calc(var(--ld-focus-mode-header-height) - 10px);
	height: calc(var(--ld-focus-mode-header-height) - 10px);
}
// If using square avatar
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-profile-avatar {
	width: calc(var(--ld-focus-mode-header-height) - 1px);
	height: calc(var(--ld-focus-mode-header-height) - 1px);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	height: calc(var(--ld-focus-mode-header-height) - 1px);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar {
	padding-top: var(--ld-focus-mode-header-height);
}

}

Bonus Tip: Header Logo

If you increase the focus mode header height, you might want to add more spacing around your header logo. To do that, you can use the following CSS. Adjust 10px to whatever spacing you’d like.

.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
	padding: 10px;
}

You might also be interested in how to move the focus mode sidebar to the right side of the screen →

If you run into any issues, please let me know in the comments. It’s always possible I missed a specific scenario, there’s a theme conflict, etc.

Previous

LearnDash Focus Mode Edge-to-Edge Content for Page Builders

Next

Use a Custom Background Color for your LearnDash Focus Mode Header

6 Comments

  1. michael

    thank’s dave…..how to increase size of logo in focus mode??
    Merci

    • Michael — The only two things that limit the size of the logo are the height of the header bar (which this post addresses), and then the padding applied to the .ld-brand-logo parent div, which contains the logo.

      Using my free plugin, I already reduce the amount of padding. But if you want to reduce it further, you could use this:

      .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
      	padding: 1px 2px;
      }

      Or use padding: 0; to make the logo touch the edges of the screen.

      The first value is top/bottom padding. The second value is left/right padding.

      The only other thing is to remove any whitespace you might have around the actual image itself.

  2. Hi.
    Thanks for the code, but just one question.
    How could add a button to login in my free classes?
    I have that classes open but to make the quizz and have certified they need to buy/ have and account or be logged in.

    • By default, if you’re using one of LearnDash’s payment methods (PayPal or Stripe), a “take this course” button should appear on the course page. Clicking that will take them to the payment method that you’ve set up.

      In addition, you can use the payment buttons shortcode to display a “take this course” button elsewhere on the site, or the LearnDash login shortcode to display a button that opens the login form.

  3. Mohsen

    Salut.
    Merci pour le code, mais juste une question.
    Les cours learndash sont définis par défaut ouvert comment peut-on changer en fermé par défaut ?

    • Par défaut, il n’y a qu’un moyen de le faire manuellement, cours par cours. Il n’existe aucun moyen de définir un mode d’accès par défaut pour les cours.

      Vous pouvez écrire du code personnalisé, mais je ne sais pas comment l’écrire.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén