Customize the “Return to Course” Link in the LearnDash Navigation Widget

When you use the LearnDash course navigation widget, and navigate to a lesson, topic or quiz page, you’ll see a “Return to [Course]” link appear at the bottom. No surprise, this brings you back to the course page.

But what if you wanted to customize the “Return to [Course]” link?

• 🚫 Hide the “Return to” part and just display the course title?
• 👈 Add a back arrow before the course title?
• 👆 Move the entire link to the top of the navigation?
• Or just completely remove the link all together?!

You’ve come to the right place!

Looking for an even easier way to customize the entire LearnDash course navigation widget?! You’re in luck. I’ve developed a plugin for that. Over 80 design options, all available in the Customizer with no coding experience necessary. Check it out 👉

Now let’s get into the CSS.

NOTE
The following CSS should be placed in the style.css file of a child theme, or the “Additional CSS” area of the WordPress Customizer.

1. Hide the “Return to” Text

To hide the “Return to” text and just show the course title, we first need to hide the entire line of text.

.course_navigation .widget_course_return {
	visibility: hidden;
}

Now we’ll target the <a> tag within this text block, and change its visibility back to visible. We have to add some margins in order to get the vertical spacing correct. We also add display: block; to create a larger clickable area.

.widget_ldcoursenavigation #course_navigation .widget_course_return a {
	visibility: visible;
	display: block;
	margin-top: -1em;
	margin-bottom: 1em;
}

Now you’ll just be left with a link that contains your course title.

2. Add a Back Arrow

Let’s say you’re okay with the “Return to” text, but you’d like to show an arrow pointing backwards. This is a small indicator that you’re going back to the main course page.

We can do this with one simple line of CSS:

.course_navigation .widget_course_return:before {
	content: '\2190';
}

“2190” is the alt code for the ← character. You can use any special character you’d like. Simply look up its alt code and replace “2190” with another code.

3. Move the Link to the Top

Now let’s say you just want to move the link to the very top of your course navigation, above all the lessons & topics. We can do that with CSS as well.

We’ll use the CSS flexible box layout module (aka: flexbox) to achieve this.

First, we turn the entire LearnDash course navigation widget into a flex container, and change it’s direction from the default row into column.

.widget_ldcoursenavigation #course_navigation .ld-course-navigation-widget-content-contaiiner {
	display: flex;
	flex-direction: column;
}

Now, we target just the “Return to [Course]” link, move it up in the flex container using the order property (negative/lower values move up, positive/larger values move down), and switch the margins around since it’s now at the top instead of the bottom.

.widget_ldcoursenavigation #course_navigation .widget_course_return {
	order: -1;
	margin-top: 0;
	margin-bottom: 1em;
}

4. Completely Remove the Link

To completely remove the “Return to [Course]” link all together, use this CSS:

.widget_course_return {
	display: none;
}

👏 Now give yourself a pat on the back for a job well done!

What other changes would you like to make to the course navigation widget?

If you’re a ninja with CSS, feel free to just use the code mentioned here. But if you don’t know much code, or prefer to work visually in the Customizer, I’ll leave you with this…

To learn more or purchase the plugin, check out Design Upgrade Pro for LearnDash.