How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course

  • Last updated on August 1st, 2024

Moodle 4.x introduced a new secondary navigation system which is located in the course header area right under the course name. The navigation menu items are presented in a tabbed horizontal menu bar and Moodle shows different menu items to different users.

In a typical Moodle course, students see four tabbed menu items: “Course”, “Participants”, “Grade” and “Competencies” as shown in the figure below.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-1

In the same course, the course teacher or admin sees many more tabbed menu items in the menu bar. For example “Settings” which links to the page for the teacher to configure the course general settings.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-2

Why hide the course’s secondary menu from students?

The secondary navigation system is a new feature in Moodle 4.x and it provides an intuitive way for users to quickly access course related sub pages. However, if you are using your Moodle course page in an unconventional way you might consider hiding the menu from your students to avoid confusion and distraction. In the example below we will show you a real-world use case and our solution to hide the menu.

Use Case Background:

A customer who is using our Moodle 4.x theme Edutor contacted us about hiding the course secondary menu from their students on specific Moodle courses. The customer sent us their course screenshot (see below) and explained the reasoning behind it.

Use Case Reasoning:

“The reason for this is that we have a few static courses that act as information hubs, so this menu bar is unnecessary and might confuse students. However, we’d like to keep the bar for all of our usual courses.”

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-4

Want to borrow this customer’s idea and create similar-looking Moodle courses? Check out Moodle’s course format “Tiles”.

Solution:

Since the course’s secondary menu can not be “turned off” via Moodle’s settings, the only workaround is to hide the menu via targeted custom css/scss code. If you’re using Boost or one of our Boost-based Moodle themes you can follow the steps below to create your custom code to hide the menu in targeted courses.

Step 1 – Get Course ID

First of all, you need to get the ID for the targeted course. The easiest way to find out the course ID is to visit the course page and check the page URL in your browser’s address bar.

A typical course URL should look like this: https://yourmoodlesite.com/course/view.php?id=1 and the course ID is the number following id=

Here is a course on our theme demo site and the course ID is 9 https://elearning.3rdwavemedia.com/moodle/edutor/1/course/view.php?id=9

Step 2 – Add Custom CSS Code

If you’re using one of our Moodle themes you can go to: Site administrator > Appearance > Themes > Edutor (replace with your theme name) > Advanced Settings

Enter your custom css/scss code in the Raw SCSS input field as shown in the figure below. The code example in the screenshot assumes the target course’s ID is 9. If your target course ID is 1 or 5 you need to replace .course-9 to .course-1 or .course-5 in the css code.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-3

The code below hides the course secondary menu in the target course (course ID:9) for students:

.course-9 .secondarynavigation {
    display: none; 
}

The code below shows the course secondary menu in the target course (course ID:9) for the course teacher or admin when editing is turned on.

.course-9.editing .secondarynavigation {
    display: block; 
}

Outcome

Now your students won’t see the secondary menu in the targeted course but the course teacher or admin can still see and access the secondary menu when Editing is on.

You May Also Like