Move the LearnDash Focus Mode Sidebar to the Right

We’ve previously showed you how to adjust the focus mode header height, and apply a background color to the focus mode header. In this article, we’ll continue customizing LearnDash’s Focus Mode by moving the navigation panel (aka: Focus Mode sidebar) from the left side of the screen to the right.

I’ll walk you through all the CSS and explain what each piece of code is doing, and then provide the full CSS to copy/paste at the bottom.

LearnDash 4.1 Added a Toggle 🎉

I’ll leave all my CSS below, but you no longer need to use custom CSS to achieve this. In LearnDash 4.1, you can now move the Focus Mode sidebar to the right with a simple toggle.

Follow these steps:

1. Navigate to LearnDash LMS > Settings
2. In the Design & Content Elements section…
3. First, make sure you’ve enabled the Focus Mode option
4. Then, next to Focus Mode Sidebar Position, choose Right from the dropdown menu
5. Click Save

That’s all there is to it. If you’re using a version of LearnDash before 4.1, or are just curious about the CSS, you can continue on.

Caveats

Before we get started with the code, I need to mention a few things:

• Most of the code will work on a default LearnDash installation, but there are a few lines that are written specifically to work with the Design Upgrade for LearnDash plugin (free or pro). If you’re not using this plugin, you’ll need to make some adjustments to the transform property on the icons, and use your own colors instead of CSS custom properties.
• This only applies to screens 768px or higher, which basically means desktop screens. Most tablets & mobile devices will still show the hamburger button in the top-left of the header and open the navigation on the left side.
• This is most likely NOT compatible with BuddyBoss.

The CSS

There are quite a few things we need to change for this to work properly. Let’s go through them one at a time.

Apply only to larger screens

The first line of code is called a media query. It means that all the code that follows will only be applied on screens 768px or larger. We do this because LearnDash applies a completely different set of CSS for smaller devices. We don’t want to mess with that code. We just want to move the Focus Mode navigation to the right on larger screens (mainly, desktops).

@media (min-width:768px) {

We will then write all of our code, and close the media query at the very end with a closing }.

Sidebar Position & Borders

This CSS will remove the left positioning of the sidebar, and apply a right positioning. That’s what the left and right properties do.

We also need to move the border to the other side, so we remove the border-right and add a border-left instead.

If you’re not using the Design Upgrade for LearnDash plugin, replace var(--ldx-course-nav-line-separator-color) with a standard hexadecimal color value.

.learndash-wrapper .ld-focus .ld-focus-sidebar {
	left: unset;
	right: 0;
	border-right: 0;
	border-left: 1px solid var(--ldx-course-nav-line-separator-color);
}

Main Content Position

The main content is shown in relation to the sidebar. Typically, space is added to the left of the main content to make room for the sidebar. So now we need to switch that space to be on the right.

.learndash-wrapper .ld-focus .ld-focus-main {
	margin-left: 0;
	margin-right: 350px;
	-webkit-transition: margin-right .3s ease;
	transition: margin-right .3s ease;
}

Sidebar Position When Collapsed

The position of the sidebar is adjusted when it’s collapsed. Instead of moving it off the screen to the left, we need to move it off the screen to the right.

.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar {
	-webkit-transform: translateX(-webkit-calc(100% - 50px));
	-ms-transform: translateX(calc(100% - 50px));
	transform: translateX(calc(100% - 50px));
	border-left: 0;
}

Space for the Arrow to Collapse

Now we need to adjust the position of the arrow that is used to collapse the sidebar. Instead of it being on the right side of the course title, we need to move it to the left. Here, we adjust the position of the arrow itself, as well as change the padding of the entire course title area to make room for its new position.

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	padding: .75em 1em .75em 4em;
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
	right: unset;
	left: 0;
}

Flip the Arrow Icon

This bit of code is specific for the Design Upgrade for LearnDash plugin. LearnDash itself doesn’t do anything to the arrow icon when the sidebar is collapsed, but I thought that was strange, especially since it’s really easy to flip it with CSS.

Since the Design Upgrade plugin flips the arrow when the sidebar is collapsed, we need to adjust the rotation to account for the sidebar being on the opposite side of the screen now.

If you’re not using the Design Upgrade for LearnDash plugin, you’ll still need to adjust the rotation of the icon, but you would need to adjust this code slightly.

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	transform: translateY(-50%) translateX(-20%) rotate(180deg);
}
.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	transform: translateY(-50%) translateX(-20%) rotate(0deg);
}

Complete Code

Here is the entire CSS code to move the focus mode sidebar to the right side of the screen. You can copy/paste it to your site.

1. Navigate to Appearance > Customize
2. Click on Additional CSS
3. Paste this code in the box
4. Click the Publish button at the top

@media (min-width:768px) {
	.learndash-wrapper .ld-focus .ld-focus-sidebar {
		left: unset;
		right: 0;
		border-right: 0;
		border-left: 1px solid var(--ldx-course-nav-line-separator-color);
	}
	.learndash-wrapper .ld-focus .ld-focus-main {
		margin-left: 0;
		margin-right: 350px;
		-webkit-transition: margin-right .3s ease;
		transition: margin-right .3s ease;
	}
	.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar {
		-webkit-transform: translateX(-webkit-calc(100% - 50px));
		-ms-transform: translateX(calc(100% - 50px));
		transform: translateX(calc(100% - 50px));
		border-left: 0;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
		padding: .75em 1em .75em 4em;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
		right: unset;
		left: 0;
	}
	.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
		transform: translateY(-50%) translateX(-20%) rotate(180deg);
	}
	.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
		transform: translateY(-50%) translateX(-20%) rotate(0deg);
	}
}

---

If you have any questions about the code, or your Focus Mode sidebar doesn’t move to the right side of the screen, please let me know in the comments. It could be a theme conflict.

For more tips & tricks, check out our complete guide to LearnDash Focus Mode.