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.

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.

Recommended ProductKinsta managed WordPress hosting

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.

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Recommended Product

Rapyd WordPress Hosting
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.

Get 25% OFF Rapyd Today →

Proven and tested by over 1,000 LearnDash customers. Learn More →