LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Change the LearnDash Focus Mode Header Height

Sometimes we use affiliate links. We may be compensated if you use our links to make a purchase. Rest assured, we are extremely selective in who we partner with, and only recommend products we wholeheartedly 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.

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.

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.

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.

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.

Here’s the CSS:

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

.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);

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.


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


Use a Custom Background Color for your LearnDash Focus Mode Header


  1. michael

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

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

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén