LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Change Font Size in LearnDash Course Navigation Widget

Are the font sizes in your LearnDash course navigation widget too small? Or they don’t match your theme?

In this post, I’ll show you how to change the font size of your course nav widget. You can change the font size of everything in the course nav, as well as target just the lessons. Let’s walk through each option.

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.

How to Change Font Size in the Course Nav Widget

The following CSS will update the font size of everything within your LearnDash course navigation. You can change the “20px” value to whatever font size you’d like.

.widget_ldcoursenavigation .course_navigation .learndash_navigation_lesson_topics_list {
	font-size: 20px;
}

Now, if you want to change the font size of the lessons in your course nav to something different than the size you set above, you can use this code.

How to Change Font Size of Lessons in the Course Nav Widget

This code should be placed AFTER and IN ADDITION TO the code above.

.widget_ldcoursenavigation .course_navigation .learndash_navigation_lesson_topics_list .lesson {
	font-size: 20px;
}

Again, change “20px” to any value you’d like.

Frustrated with the LearnDash design?

Design Upgrade for LearnDash

80+ styling options for LearnDash.
Complete design control in the WordPress Customizer.

And that’s all there is to changing the font size for the LearnDash course navigation widget. Now when you use the Course Navigation widget in your sidebar, your font sizes will be updated.

LearnDash Course Navigation Widget
The LearnDash course navigation widget added to the Right Sidebar

If you’d like to change the font size of another element on your LearnDash site, please let me know in the comments.

Previous

How to Display Course Title Over the Image in LearnDash Course Grid

Next

How to Use & Customize the LearnDash Course Grid

5 Comments

  1. Gemma

    Hi – great list of codes here.
    Are you able to also change the font size in quizzes – i.e. the font size in the answer boxes?
    Thanks!

    • Hi Gemma — Sure. If by “answer box” you mean the message that shows “Correct/Incorrect” and then you type in feedback for the student, then use this code:

      .wpProQuiz_content .wpProQuiz_response {
      	font-size: 1rem;
      }

      You can increase the value from there until you’ve got the size you want. Try 1.125rem, 1.25rem, 1.375rem, and so on.

  2. Gemma

    Hi Dave – thanks so much for the response. Sorry but I meant the box where users have to input their answer when taking the quiz – this occurs in ‘free choice’ or cloze’ type questions. Not quite sure if the font type or size can be changed here – I’ve tried with theme options but it doesn’t seem to have any effect. Thanks again! Gemma

    • Hi Gemma — Sounds like you have a poorly coded theme. A quality theme should apply a base font size to all text inputs & textareas (that’s what those boxes are called), that matches that of the main body text elsewhere in the theme.

      But, yes, you can change the font size of those areas. Here’s the CSS to do it:

      .wpProQuiz_content .wpProQuiz_question .wpProQuiz_questionEssay,
      .wpProQuiz_content .wpProQuiz_question .wpProQuiz_questionInput {
      	font-size: 1rem;
      }
  3. Gemma

    Perfect – thanks so much Dave – works great on free choice questions. Yes, I think you’re right that it must be a problem with the theme. It doesn’t quite change the font size on cloze questions but I will look into it further. Thanks for your help!

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén