LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

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.

Can I Use a Different Header Altogether?

You cannot use a different header for focus mode. Once you enable 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.

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.

Here’s the CSS:

:root {
	--ld-focus-mode-header-height: 65px;
}

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

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

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.

Previous

LearnDash Focus Mode Edge-to-Edge Content for Page Builders

2 Comments

  1. michael

    thank’s dave…..how to increase size of logo in focus mode??
    Merci

    • Michael — The only two things that limit the size of the logo are the height of the header bar (which this post addresses), and then the padding applied to the .ld-brand-logo parent div, which contains the logo.

      Using my free plugin, I already reduce the amount of padding. But if you want to reduce it further, you could use this:

      .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
      	padding: 1px 2px;
      }

      Or use padding: 0; to make the logo touch the edges of the screen.

      The first value is top/bottom padding. The second value is left/right padding.

      The only other thing is to remove any whitespace you might have around the actual image itself.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén