diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js
index 217a017bcbb2e1441f887a54ba3d833e23e8ee20..0dc8775e248bb349d788a171dcbf069431ce6335 100644
--- a/assets/js/theme/design-system/mainMenu.js
+++ b/assets/js/theme/design-system/mainMenu.js
@@ -60,6 +60,7 @@ class MainMenu {
     resize () {
         const isMobile = window.innerWidth <= breakpoints.md;
         document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
+        document.documentElement.style.setProperty('--header-menu-max-height', (window.innerHeight - this.element.offsetHeight) + 'px');
         
         // is state changed ?
         if (this.state.isMobile === isMobile) {
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index c836ae9f8fbc0e1173769fde3ab95d234648b6f2..36bfc05f694f8a40c30986f8319dee74427c2ce0 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -13,6 +13,7 @@
     --grid-gutter: #{$grid-gutter}
     --grid-max-width: #{$grid-max-width}
     --header-height: #{$header-height}
+    --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
     @include media-breakpoint-up(desktop)
         --header-height: #{$header-height-desktop}
 
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 104527e036e960a8f95ffec4601eb789fdc6336f..4b8c63b58f304fefd6a1839419234b64b2a87978 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -7,12 +7,13 @@
         opacity: 0
 
 .menu
+    
     @include media-breakpoint-down(desktop)
         -webkit-flex-basis: 100vw
         display: none
         flex-basis: 100vw
         margin-top: $spacing1
-        max-height: calc(100vh - var(--header-height) - #{$spacing4})
+        max-height: var(--header-menu-max-height)
         overflow: auto
     a,
     a:focus,