How to Change the LearnDash Focus Mode Header Height

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