LearnDash Design & Tutorials

LearnDash Design & Tutorials

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

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

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.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More →

Previous

How to Clone LearnDash Courses, Lessons, Quizzes & More (Create Templates)

Next

Redirect Clicks on Course Content Table for Logged-Out Users

3 Comments

  1. Randy

    Hello. Does this still apply to the new version or LD? When I inspected the code I didn’t see any of those classes.

    I see this:

    .learndash-wrapper .ld-content-actions>a, .learndash-wrapper .ld-content-actions .ld-content-action .ld-course-step-back

    • Hi Randy. No, these are for the Legacy templates prior to LearnDash 3.0.

      The CSS you referenced is accurate for the “Back to Course” link at the bottom of focus mode. But if you’re using the Course Navigation widget somewhere else, you should use this CSS instead:

      .learndash-wrapper .ld-course-navigation .ld-course-navigation-actions .ld-home-link {
      	color: #000;
      }

      And then add whatever styles you want in that declaration.

  2. Stephan

    This also removes the Return to Course link in 3.0

    .ld-course-step-back {
    	display: none;
    }

Leave a Reply

Your email address will not be published.

Powered by WordPress & Theme by Anders Norén