diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
index 7ae45b850..4b4eb2a8c 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -21,6 +21,10 @@
         margin-top: var(--button-vertical-margin);
         margin-bottom: var(--button-vertical-margin);
     }
+
+    &.empty {
+        display: none;
+    }
 }
 
 :host-context(core-course-format.core-course-format-singleactivity) {
diff --git a/src/core/features/course/components/module-navigation/module-navigation.ts b/src/core/features/course/components/module-navigation/module-navigation.ts
index 4e436af4b..63211dbc2 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.ts
+++ b/src/core/features/course/components/module-navigation/module-navigation.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { CoreCourse, CoreCourseWSSection } from '@features/course/services/course';
 import { CoreCourseHelper, CoreCourseModuleData } from '@features/course/services/course-helper';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
@@ -44,11 +44,13 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
     nextModuleSection?: CoreCourseWSSection;
     previousModuleSection?: CoreCourseWSSection;
     loaded = false;
+    element: HTMLElement;
 
     protected completionObserver: CoreEventObserver;
 
-    constructor(protected ionContent: IonContent) {
+    constructor(protected ionContent: IonContent, element: ElementRef) {
         const siteId = CoreSites.getCurrentSiteId();
+        this.element = element.nativeElement;
 
         this.completionObserver = CoreEvents.on(CoreEvents.COMPLETION_MODULE_VIEWED, async (data) => {
             if (data && data.courseId == this.courseId) {
@@ -168,6 +170,8 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
                 }
             }
         }
+
+        this.element.classList.toggle('empty', !this.nextModule && !this.previousModule);
     }
 
     /**