Hide breadcrumbing navigation in Lesson

Hide breadcrumbing navigation in Lesson

av Cindy Weber -
Antall svar: 7

Moodle 3.11 Boost
In Lesson, is there a way to eliminate breadcrumbing navigation and maybe even reduce the size of the Lesson Title? Especially on a phone, but even on a PC, the student would need to scroll down to see each page because of the amount of space used by breadcrumbing and Title of the Lesson. A screenshot of my large phone, student role, barely shows the start of the lesson on the page.


Gjennomsnittlig vurdering: -
Som svar til Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

av Cindy Weber -
This CSS hid it throughout the site:
#page-navbar .breadcrumb {display: none;}
Site Admin-Appearance-Themes-Boost-Advanced-Raw SCSS

Does anyone know how to make it specific to Lesson?
Gjennomsnittlig vurdering: -
Som svar til Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

av Dominique Bauer -
Bilde av Documentation writers Bilde av Particularly helpful Moodlers Bilde av Plugin developers
Hello Cindy,

You could put the CSS code in a block that appears only on specific lessons.

Better yet is to apply your code on lesson pages only, using a simple Javascript "if" statement. I will give you more details at the end of next week, because right now I'm at the beach with just my phone..
Gjennomsnittlig vurdering: -
Som svar til Dominique Bauer

Re: Hide breadcrumbing navigation in Lesson

av Cindy Weber -
Thanks Dominique! I would appreciate more details. I made some additional attempts without success. I find the breadcrumbing a nice backup, except when using lesson.
Gjennomsnittlig vurdering: -
Som svar til Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

av Dominique Bauer -
Bilde av Documentation writers Bilde av Particularly helpful Moodlers Bilde av Plugin developers
Hello Cinfy?,Someone else might give you the required few Javascript statements. They are quite simple if you know Javascript.

Otherwise, I would ask you to wait until Christmas.
Gjennomsnittlig vurdering: -
Som svar til Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

av Dominique Bauer -
Bilde av Documentation writers Bilde av Particularly helpful Moodlers Bilde av Plugin developers

Hello Cindy,

Add the following code to Site administration / Appearance / Additional HTML / Within HEAD: 

<!-- Use no-nonsense jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

// Wait for the document to be loaded.
$(document).ready(function() {

    // Check if the URL contains "lesson", i.e. check if the page is part of a lesson.
    if (window.location.href.indexOf("lesson") > -1) {

        // Hide the breadcrumb.
        $(".breadcrumb").hide();

        // Reduce the size of the lesson icon.
        $(".modicon_lesson").css({"width":"30px","height":"30px"});

        // Remove the superfluous icon name label "LESSON".
        $(".page-header-headings div").hide();

        // Reduce the size of the Lesson title (smaller-->>h3, h4, h5, h6).
        $(".page-header-headings h1").attr("class", "h5");

    }
});
</script>

You can keep or remove "#page-navbar .breadcrumb {display: none;}", it won't make any difference.

Then, instead of that, you will get this

MoodleForum_20221227_0931.png MoodleForum_20221227_0932.png


All of the above relates to Moodle 4.1. Feel free to ask me if this doesn't work with Moodle 3.11.

Gjennomsnittlig vurdering:Useful (2)