← back to all snippets

Course Grid: Move Progress Bar Below Image

Updated 2 years ago
by Dave Warfel
Example of progress bar below image in the LearnDash course grid

“LearnDash 3.0” Active Template

This code only works for the legacy layout/design of the course grid. It will not work for any of the Course Grid 2.0 layouts/design.

Use the following CSS to move the progress bar above the title, so that it appears directly below your featured image.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption {
	padding-top: 30px;
	position: relative;
}

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .learndash-widget {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .learndash-widget .ld-progress,
.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .learndash-widget .ld-progress-bar {
	margin-top: 0;
}

“LearnDash Legacy” Active Template

By default, on the LearnDash course grid, the progress bar is displayed at the bottom of each grid item. If you want to move it up to just below the image (and above the course title), you can use the following CSS.

This should work with or without the Design Upgrade for LearnDash plugin active.

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption {
	display: flex;
	flex-direction: column;
	padding: 0;
}
.ld-course-list-items .ld_course_grid .thumbnail .caption .learndash-widget {
	order: -1;
}
.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress,
.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress-bar {
	margin-top: 0;
}
.thumbnail .learndash-wrapper .ld-progress {
	margin-bottom: 1rem;
}
.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress-bar {
	border-radius: 0;
}
.ld_course_grid .caption .ld-progress .ld-progress-heading {
	padding-left: 7px;
	padding-right: 7px;
}

.ld-course-list-items .ld_course_grid .thumbnail .caption .entry-title,
.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content,
.ld-course-list-items .ld_course_grid .thumbnail .caption .ld_course_grid_button {
	padding-left: 1rem;
	padding-right: 1rem;
}

If a progress bar isn’t being displayed at all on your grid, you must enable it in the block settings, or use the progress_bar="true" parameter if you’re using the

shortcode (see here).

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

CSS Video

Report

Harassment or bullying behavior.
Contains misleading or false information.
Contains abusive or derogatory content.
Contains spam, fake content or potential malware.

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts

Please allow a few minutes for this process to complete.

Report

You have already reported this .

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.