Move the LearnDash Focus Mode Sidebar to the Right

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.

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.

How to change the LearnDash Focus Mode sidebar position (2:45)

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.

Recommended ProductKinsta hosting site speed boost

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

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.

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 →

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

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.

Recommended Product

Uncanny Owl logo
Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
• Uncanny Groups - group/corporate sales, group reporting & more.
• Tin Canny Reporting - one of the best reporting plugins for LearnDash
• Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

  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.

Uncanny Automator logo
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.

ʉۢ Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
ʉۢ Trusted by 30,000 companies

Get 10% OFF with code affiliate10-dwarfel

Previous

Use a Custom Background Color for your LearnDash Focus Mode Header

Next

Enter WisdmLabs Ultimate Elearning Giveaway

9 Comments

  1. Lukas

    Hi there, it appears that Buddyboss Theme isn’t supporting this, can you hint me on how to adapt your code to make it work with the theme?
    Thanks for your work!

    • Hi Lukas — I wish it was as easy as giving you a hint. BuddyBoss has completely rewritten all the HTML code for their sidebar navigation. It is nothing like the code that LearnDash uses, so it would need to be completely rewritten.

      I’ll see if I can make some time to play around with it. If I come up with a solution, I’ll email you.

  2. Hi Lukas!

    I don’t know if you are still looking to do this, but it works for me with this code:

    .lms-topic-sidebar-wrapper {order: 1;z-index:0;}

    It’s not ideal, since the sidebar appears on the left for a split second, however it does the trick 🙂

  3. Sam

    Hi, is there any way to collapse the side navigation by default? I don’t want to have it “expanded” unless user manually clicks on it.

    • Hi Sam — Unfortunately, LearnDash doesn’t provide this option. In an ideal world, they would store the user’s preference (based on each time they clicked the collapse arrow) in a cookie or local storage, and remember it for subsequent page loads. But they don’t.

      There is a way to do this, but it would require custom coding. A JavaScript developer should be able to do it for somewhere between 30-60 minutes of work.

  4. Markus

    To get the expand arrow orientated around the correct way, maybe change rotate from 0 to 180 degrees?

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

    Hi Dave, I was just using your plugin “Widget Areas for LearnDash”, using this I can add something after Course Content, which is awesome. Now since it works like a widget, the contents are always common for all the courses. Is there any way or code to “add some content after Course Content” for any specific course. I use this ratings plugin ‘site reviews’ and I want to use different shortcodes to different courses.

    • Hi Milan – Yes, you can show/hide widgets on specific course pages. I have a section on how to do this on the widget areas plugin page. Scroll down to the section labeled “SHOW/HIDE WIDGETS ON SPECIFIC COURSE/LESSON/TOPIC PAGES.”

  6. Milan Tiwari

    Thanks Dave, it worked.

Leave a Reply

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