diff --git a/theme/boost/scss/moodle/navbar.scss b/theme/boost/scss/moodle/navbar.scss
index 263645f22ba..a948ef7c2b5 100644
--- a/theme/boost/scss/moodle/navbar.scss
+++ b/theme/boost/scss/moodle/navbar.scss
@@ -168,3 +168,8 @@
 .pagelayout-embedded #page {
     margin-top: 0;
 }
+
+// Make navbar height available for non-sass use.
+:root {
+    --navbar-height: #{$navbar-height};
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c18f8b35d5c..4c19f11e9a8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -26607,6 +26607,10 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+:root {
+  --navbar-height: 60px;
+}
+
 /**
 * Reportbuilder.
 */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 783c099d643..84855111011 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -26541,6 +26541,10 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+:root {
+  --navbar-height: 50px;
+}
+
 /**
 * Reportbuilder.
 */