Use a Custom Background Color for your LearnDash Focus Mode Header

There are a few questions I routinely get about the LearnDash Focus Mode header. I’ve previously explained how to use a custom height for the focus mode header, as well as move the focus mode sidebar to the right. In this article, we’ll take a look at applying your own background color to the entire LearnDash Focus Mode header area.

4 Main Areas

There are 4 main areas that we need to update the colors for. Each have a unique CSS class we’ll use to target them.

• Logo area
  .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo
• Progress bar
  .learndash-wrapper .ld-focus .ld-focus-header .ld-progress
• Content actions
  .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions
• User menu
  .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu

We can put all 4 of these selectors together and apply one single background color. I’m going to use #000 for black, but you should use whatever color you’d like.

NOTE
We’ve added a 5th, generic selector to this code to ensure that all aspects of the header on mobile devices are changed as well.

.learndash-wrapper .ld-focus .ld-focus-header,
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo,
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
	background: #000;
}

That actually does most of the work, but you’ll probably want to take a few additional steps to fine-tune things a bit.

Bottom Border

To change the color of the bottom border of the focus mode header, use this CSS:

.learndash-wrapper .ld-focus .ld-focus-header {
	border-color: #d80000;
}

Alternatively, you could change the thickness of the border as well, but that starts to introduce more complexity since the header uses a fixed height. I’ve tested this with an increase to 2px and 3px, but anything beyond that, I can’t guarantee it’ll work.

• 2px border requires a 52px height
• 3px border requires a 53px height

.learndash-wrapper .ld-focus .ld-focus-header {
	border-bottom: 2px solid #d80000;
	height: 52px;
}

That code would apply a 2px red border instead of the default 1px.

Vertical Borders Between Content Actions

There are 1px vertical borders between the “Previous Lesson,” “Next Lesson,” and “Mark Complete” buttons. These can be changed as well.

If you’re using the Design Upgrade for LearnDash plugin (free or pro), you’ll need to add the following CSS:

.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action {
	height: 50px;
}

From here, you can change the color of those vertical borders with the following CSS:

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	border-color: #d80000;
}

Changing the thickness of these borders is a bit more tricky. We’re targeting 3 different elements, and some need left borders while others need right borders. I’m not going to cover that here, unless there is high demand in the comments for this.

Mobile Hamburger Menu

We also need to change the color of the 3 horizontal lines that make up the mobile hamburger menu. We’ll change them to white:

.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span {
	background: #fff;
}

And finally…

Button Hover Colors

You might also want to customize the background & text colors of the content action buttons in LearnDash Focus Mode. We can use the following CSS to handle those:

.learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover {
	background: yellow !important;
	color: #000;
}

background is obviously for the background color and color is for the text color.

Don’t forget to change all these colors to match your brand.

Bonus Tip: Text Color

If you change your Focus Mode header background to a much darker color, like dark grey or black, you might want to change the user’s name to a lighter color. To update this text color, use the following CSS:

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text {
	color: #fff;
}

LearnDash Focus Mode Header, Custom Background, Full CSS

Here’s the complete CSS code to copy/paste. Be sure to adjust your colors as desired.

.learndash-wrapper .ld-focus .ld-focus-header,
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo,
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
	background: #000;
}
.learndash-wrapper .ld-focus .ld-focus-header {
	border-color: #d80000;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action {
	height: 50px;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	border-color: #d80000;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-button:hover {
	background: yellow !important;
	color: #000;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span {
	background: #fff;
}
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text {
	color: #fff;
}

---

That should do it. Combine this with our tutorial on how to change the focus mode header height, and you’ll have a fully customized header for your learning experience.