LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Change Font Size in LearnDash Course Navigation Widget

By

On September 9, 2018

In Tutorials

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.

View Plugin â†’

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

13 Comments

Add Comment →

  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!

    May 14, 2019
    Reply
    •

      Dave Warfel

      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.

      May 14, 2019

  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

    May 15, 2019
    Reply
    •

      Dave Warfel

      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;
}
      May 15, 2019

  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!

    May 22, 2019
    Reply

  4. Sandra Willie

    Hi – how can you change the size of the font in the paragraph box? Also the button size for the quizzes please – I’d like to make these larger and preferrably with rounded corners

    May 1, 2020
    Reply
    •

      Dave Warfel

      I’m not sure exactly what you mean by “paragraph box,” but if you’re referring to content that you’re adding via the WordPress block editor, that is controlled by your theme.

      As for quiz buttons, there are quite a few different class names used for all the quiz buttons. I think this will get most of them.

      .learndash .wpProQuiz_content .wpProQuiz_button, .learndash .wpProQuiz_content .wpProQuiz_button2, .learndash .wpProQuiz_content .wpProQuiz_button.wpProQuiz_TipButton, .learndash .wpProQuiz_content a#quiz_continue_link, .learndash .wpProQuiz_content form[name=uploadEssay] input[type=submit], .learndash .wpProQuiz_content .wpProQuiz_certificate a.btn-blue {
font-size: 18px;
border-radius: 20px;
}

      Adjust both values to your liking.

      May 1, 2020

  5. Liam

    Hi! Thanks for the above , it was really helpful! How can I customise the font size and type for topics, all questions and answers?

    Thanks in advance 🙂

    May 1, 2020
    Reply
    •

      Dave Warfel

      Sorry Liam, but I don’t understand what you’re referring to. Can you please provide a screenshot that illustrates exactly what you’re referring to?

      May 1, 2020

    • Liam

      Hi. Sorry for not being more specific. I would like to change the font size to 10px for my quizzes; questions and answers (single choice etc). Currently, the font size is a bit on the large side and I would like to reduce this. Additionally, I would also like to remove some of the padding from the possible answers boxes. Here’s a link to what im reffering to.

      https://drive.google.com/file/d/1ahA3ib3f-TRTW1Jfmxu_rUmKot7pnTBY/view?usp=sharing

      Thanks!

      May 2, 2020

    • Dave Warfel

      This CSS should do it. Add this to the “Additional CSS” area in the WordPress Customizer.

      .learndash .wpProQuiz_content .wpProQuiz_question {
    font-size: 90%;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label {
    padding: 0.5em;
}
      May 2, 2020

  6. Liam

    Hi Dave! Thank you for the previous code, It worked great! Is it possible to make the “free” choice answer text boxes bigger in quizzes? At the minute, they are small and students have to scroll to see what they have written previously

    https://drive.google.com/file/d/1guqUIjyVXiBmTAZ2z9wkRxvvFHSKycM2/view?usp=sharing

    May 8, 2020
    Reply
    •

      Dave Warfel

      I think so. You would add a height:400px; to the CSS that targets that field. Sorry, I don’t have time to supply the exact code.

      May 11, 2020

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén