LearnDash Focus Mode: Sticky Header on Mobile

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.

The CSS

Add the following CSS to Appearance > Customize > Additional CSS in your WordPress admin area.

@media (max-width: 768px) {
	.learndash-wrapper .ld-focus .ld-focus-header {
		position: fixed;
	}
	.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content,
	.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content {
		padding-top: 125px;
		margin-top: 0
	}
}

Customize the Code

There are two parts to the code that you can customize, depending on exactly what you want to do.

max-width

In the first line, the max-width: 768px determines the upper-limit for when the CSS will be applied. So this will make the header fixed on all screens 768px wide and below. This would also include some tablets.

If you only want a fixed header on smaller mobile devices, try setting it to 400px, or something around there.

padding-top

When we use a fixed header, the focus mode content gets moved up and can appear behind the header. We need to add some additional padding to the content area so that it isn’t being hidden behind the header. We do this with padding-top.

I don’t recommend going any lower than 125px but you could adjust it up or down slightly to get your desired spacing.

That’s it and that’s all. Short & sweet for this one.

Let me know if you have any questions in the comments.