Sometimes we use affiliate links. We may be compensated if you use our links to make a purchase. Rest assured, we are extremely selective in who we partner with, and only recommend products we wholeheartedly believe in. Our affiliate relationships do not influence our recommendations.

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.

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

And finally…

Button Hover Colors

You might also want to customize the background & text colors of the content action buttons. 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.

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

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.