diff --git a/theme/boost/scss/moodle/navbar.scss b/theme/boost/scss/moodle/navbar.scss
index 12dade818b4..92bd367bf7d 100644
--- a/theme/boost/scss/moodle/navbar.scss
+++ b/theme/boost/scss/moodle/navbar.scss
@@ -169,3 +169,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 63f7ea3f261..bcc6c498da6 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -36869,6 +36869,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 0769900c37b..d160ce02a6e 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -36803,6 +36803,10 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+:root {
+  --navbar-height: 50px;
+}
+
 /**
 * Reportbuilder.
 */