LDX Design

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… 🤯.

Recommended ProductKinsta 2 months of free hosting

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:

Recommended ProductPressidium Hosting

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

Kinsta hosting to boost site speed
Recommended Product


Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

Previous

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

Next

Use a Custom Background Color for your LearnDash Focus Mode Header

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

  4. Hi Dave,

    I recently bought the Design Upgrade Pro plug in and I’m happy I did!

    I would like to change the height of the header in focus mode and tried the code:

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

    But it doesn’t give a result on my website. I do use the Divi pagebuilder and added the code in the Custom CSS tab of Divi. Do you have an idea what I’m doing wrong here? Thanks in advance!

    • Hi Joanne — I’m really glad you are enjoying Design Upgrade Pro 🙂.

      For the header height, you need to use the entire block of CSS, not just the first 3 lines. Please give that a try and let me know how it goes.

  5. Joanne Oedit

    Hi Dave, thanks for your quick response. I’d tried with all the lines and than it works, so that’s great. The only question that remains, how can I make it just as high as I want it to be? I tried to change from 65 px to f.e. 40 px but nothing changes.
    Thanks again 🙂

    Joanne

    • I just tested this and 40px works as expected for me. You just swapped out the 65 for 40 in that first piece of code?

      The only things I can think of are:

      1. You made a mistake with the code. If the syntax is incorrect, it will mean the entire thing doesn’t work.
      2. There is a conflict with your theme or another plugin (but this is unlikely).

  6. Joanne

    Hi Dave,

    This is the total code I used:

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

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

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

    Looking forward to hear from you!

    • This part…

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

      …needs to have two dashes in front of it, not one. Like this:

      :root {
      --ld-focus-mode-header-height: 45px;
      }
  7. Joanne

    Yes, I’ve seen that in the code, however I get a warning when I want to enter it like that, it says: “there is 1 error which must be fixed before you can save. And than on the line in CSS it says: Expected RBRACE at line 13, col 2.
    I also tried it with the two dashes, site didn’t break 😉 but there was still no result. Is there a way I can share a printscreen of what I’m doing with you? Thanks for your patience and all the help 🙂

  8. Good morning,

    I congratulate you for the Learndash tutorials. They are the best I have found and I have solved more problems and made customizations in a few days than in months of research. I state that I do not know the CSS so I just copy / paste your codes, at most I change the color codes. I entered the code for the header height but it returns me an error code so not the applied one. I can send you the CSS that I pasted earlier to open where the error is. Many thanks in advance.
    Giuseppe.

  9. Hey Dave,

    Is it possible to remove the learndash header “Percentage complete” / 1/26 Steps” Section?

    It’s not relevant to our students needs.

    Thanks!

    • Hi Michael,

      Assuming you are referring only to the instance in the header of focus mode pages, add this CSS to the Appearance > Customize > Additional CSS area in the WordPress admin.

      .ld-focus .ld-progress .ld-progress-heading .ld-progress-stats {
      	display: none;
      }
  10. Michael

    Awesome! Yes, that assumption was correct! Thanks Dave.

    After adding that code, the progress bar is still there by itself… looks kind of funny 🙂

    Is it possible to remove that as well?

    Thanks again!

    • To delete the entire thing, remove the previous code and use this in its place:

      .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-wrap {
      	display: none;
      }
  11. Our courses appear too big on the screen for a user and they have to scroll down to see the next module (next) button and when you move to next slide again its too big to see it all in the screen so have to constantly scroll down to see the buttons. Can this be resolved?

    • Hi Irene – If I’m understanding you correctly, this is something that would require changing the spacing of various elements on your lesson pages, trying to remove excess vertical space to bring your content up higher on the screen. This is a custom CSS job, and would be specific to your site. There is no one size fits all approach to address this.

      I recommend you hire a CSS developer to work on this for you.

Leave a Reply

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