Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hide/Move LearnDash topic dots & 'back to lesson' button on mobile devices
/**
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*
* NOTE: You can change 600px to another value. Any screen sizes BELOW this width
* will receive the following styles.
*/
/* Hide topic dots on screens below 600px */
@media (max-width: 600px) {
.learndash .learndash_topic_dots.type-dots {
display: none;
}
}
/* Hide 'back to lesson' button on screens below 600px */
@media (max-width: 600px) {
#learndash_back_to_lesson {
display: none;
}
}
/* Hide BOTH topic dots AND 'back to lesson' button on screens below 600px
* Here I'm just combining both selectors and giving them a display of none. */
@media (max-width: 600px) {
.learndash .learndash_topic_dots.type-dots,
#learndash_back_to_lesson {
display: none;
}
}
/* Move topic dots & 'back to lesson' button below the topic content */
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment