How to Hide or Move LearnDash Progress Dots

On topic pages, LearnDash displays a student’s lesson progress using small dots at the top of the page. If you just want to improve the look of these dots, you can install the free Design Upgrade for LearnDash plugin.

But what if you want to remove them completely? Or perhaps move them to the bottom of the page, below your topic content? With the following CSS, I’ll show you how to do both. And you can even target specific screen sizes, and only hide/move the progress dots on mobile devices.

Jump to:  Hide Dots  •  Move Dots  •  Hide/Move “Back to Lesson” Button

CSS too intimidating? I’ve got the solution 👇🏼

All of the following code should be copied & pasted to the style.css file of a child theme or the “Additional CSS” area of the WordPress Customizer.

Hide LearnDash Progress Dots

To hide the progress dots on all devices, use the following code:

/* Hide LearnDash progress dots on all devices */
.learndash .learndash_topic_dots.type-dots {
	display: none;
}

To hide the progress dots on mobile only, use the following code:

/* Hide LearnDash progress dots on screens below 600px */
@media (max-width: 600px) {

	.learndash .learndash_topic_dots.type-dots {
		display: none;
	}

}

You can change 600px to anything you’d like. Whatever width you choose, the progress dots will be hidden on all screens below that width.

Move LearnDash Progress Dots Below Content

In the following code, we’re doing two things:

We’re telling the main content area to use flexbox for layout, placing all the elements in a single column. This is what display: flex; and flex-direction: column; are for.

Next, we’re telling just the progress dots to assume an order value of 10. Since there are only 4 other elements in the main content area (“back to lesson” button, topic content, “mark complete” button, “prev/next topic” buttons), giving the progress dots an order of 10 will move them to the bottom of the page.

10 is somewhat arbitrary. Any value 5 or greater would most likely work here. I’m using 10 just in case there are other LearnDash plugins that are adding more elements to your content area. If you want to play around with their position, try using 2, 3 or 4 as the order value.

To move the progress dots below the content on all devices, use the following code:

/* Move LearnDash progress dots below the topic content */
.learndash.learndash_post_sfwd-topic {
	display: flex;
	flex-direction: column;
}
.learndash .learndash_topic_dots.type-dots {
	order: 10;
}

To move the progress dots below the content on mobile only, use the following code:

/* Move LearnDash progress dots below the topic content */
@media (max-width: 600px) {

	.learndash.learndash_post_sfwd-topic {
		display: flex;
		flex-direction: column;
	}

	.learndash .learndash_topic_dots.type-dots {
		order: 10;
	}

}

Again, you can adjust the 600px to whatever width you’d like.

---

You can also hide or move the “Back to Lesson” button. You would use similar code to what we used above, just change which element you select.

Hide/Move the “Back to Lesson” Button

To hide the “Back to Lesson” button on all devices:

/* Hide 'back to lesson' button on all devices */
#learndash_back_to_lesson {
	display: none;
}

To hide the “Back to Lesson” button on mobile only:

/* Hide 'back to lesson' button on screens below 600px */
@media (max-width: 600px) {

	#learndash_back_to_lesson {
		display: none;
	}

}

To move the “Back to Lesson” button on all devices:

/* Move 'back to lesson' button below content */
.learndash.learndash_post_sfwd-topic {
	display: flex;
	flex-direction: column;
}

/* The lower the number, the sooner it will appear on the page.
 * ex: 10 is lower than 11, so it will appear first.
 * You could switch these numbers if you wanted the 'back to lesson' button
 * to appear first, followed by the progress dots.
 */
.learndash .learndash_topic_dots.type-dots {
	order: 10;
}

#learndash_back_to_lesson {
	order: 11;
}

To move the “Back to Lesson” button on mobile only:

/* Move topic dots & 'back to lesson' button below the topic content on screens below 600px. This code is similar to the code above; we're just adding a media query to target screens below 600px width. */
@media (max-width: 600px) {

	/* This is necessary */
	.learndash.learndash_post_sfwd-topic {
		display: flex;
		flex-direction: column;
	}

	/* The lower the number, the sooner it will appear on the page.
	 * ex: 10 is lower than 11, so it will appear first.
	 * You could switch these numbers if you wanted the 'back to lesson' button
	 * to appear first, followed by the topic dots.
	 */
	.learndash .learndash_topic_dots.type-dots {
		order: 10;
	}

	#learndash_back_to_lesson {
		order: 11;
	}

}

If CSS is a little intimidating for you, I created a plugin that let’s you control the design & style of 80+ LearnDash elements from the WordPress Customizer. No coding required! You can watch a preview below & purchase the plugin here.