LearnDash 3.0 - Focus Mode - Course Navigation - Customize the expand/collapse arrow links

learndash-3-focus-mode-navigation-expand-arrows.css

/**
 * This only works when using the LearnDash 3.0 template.
 * 
 * Use the following CSS to apply a specific background color to the circle
 * around the arrow, and then change the color of the arrow itself.
 *
 * These styles should be copied & pasted to a child theme or the "Additional CSS"
 * area of the WordPress Customizer.
 *
 * Use your own color values for both background-color and color.
 */

.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview .ld-expand-button .ld-icon {
	background-color: #000;
	color: #fff;
	opacity: 1;
}

I also commented on your post on the wordpress.org support site, but here's the CSS again:

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

You can leave a review on this page:
https://wordpress.org/support/plugin/design-upgrade-learndash/reviews/

It'd be awesome if you could mention the great support I provide.

I don't do Skype or WhatsApp, and am not currently available for hire.

You'll need custom code for that. You'll probably have to edit the LearnDash template files.

LearnDash doesn't provide any option for that.

There is a plugin called Visual Customizer by Snap Orbital that has some custom icons, but I don't know that it will give you this exact output. Might be worth a look though.

If you're using LearnDash's video progression feature, and auto-completing the lesson after the video completes, it should change to a checkmark.

But if not, and you're embedding the video directly in WordPress, then the user will need to click the "mark complete" button for the checkmark to change.

https://wordpress.org/support/article/video-shortcode/

1. I don't think that's a valid shortcode.
2. It looks like you've customized the LearnDash focus mode. I also can't see if there are buttons below your video. There should be.
3. I am an expert but I'm not available for hire.

Good luck with your project.

Sorry, I'm all out of help. Good luck.