diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 3847abf27386dea7ba3551ee4ed5384a8f053c59..87335f0b7f7535da59e61037400c8f3c34796d9f 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -22,6 +22,7 @@ class MainMenu {
         };
 
         this.listen();
+        this.resize();
     }
 
     listen () {
@@ -51,7 +52,7 @@ class MainMenu {
 
     resize () {
         const isMobile = window.innerWidth <= breakpoints.md;
-
+        document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
         // is state changed ?
         if (this.state.isMobile === isMobile) {
             return null;
@@ -60,6 +61,7 @@ class MainMenu {
         this.state.isMobile = isMobile;
 
         this.closeEverything();
+        
     }
 
     toggleMainMenu (open = !this.state.isOpened) {
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 266c7bf25b70eefb0339856c2eaf9b001e87f072..d668ad9bd7cf57ac39175305eea01c6a7dbeceaa 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -97,9 +97,6 @@ $header-nav-padding-y: $spacing0 !default
 $header-logo-height: 20px !default
 $header-logo-height-md: $header-logo-height !default
 
-$header-height: $header-logo-height + $header-nav-padding-y !default
-$header-height-md: $header-logo-height-md + $header-nav-padding-y !default
-
 // Navs
 $body-overlay-color: rgba(0, 0, 0, 0.3) !default
 
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index f4e431813c9b8d2d7fb2359e64a03c52d11f8735..4c74acdcb25aeea95d2808daef028596d88b4294 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -37,15 +37,16 @@
         &::#{$pseudo}
             transform: translateX(#{px2rem($distance)})
 
-@mixin sticky($top-md: get-header-height(md), $top-sm: get-header-height())
+@mixin sticky($offset-y: false)
     position: sticky
     top: 0
     @if $header-sticky-enabled
         transition: top $header-sticky-transition
         html:not(.is-scrolling-down) &
-            top: $top-sm
-            @include media-breakpoint-up(md)
-                top: $top-md
+            @if $offset-y
+                top: calc(var(--header-height) + #{$offset-y})
+            @else 
+                top: var(--header-height)
 
 // NEW UTILS
 @mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10))
@@ -198,9 +199,3 @@
         @include icon($icon, after)
             font-size: px2rem(20) 
             margin-left: px2rem(10)
-
-@function get-header-height($breakpoint: false)
-    @if $breakpoint == md
-        @return $header-logo-height-md + $header-nav-padding-y
-    @else 
-        @return $header-logo-height + $header-nav-padding-y
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 43948ecc4ab148a385b927c2cbd02b07e7bfb6fb..1191a9bbac067fb7817a6582caf228e52bdbece3 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -3,6 +3,9 @@
 *::after
     box-sizing: border-box
 
+\:root
+    --header-height: $header-nav-padding-y * 2 + $header-logo-height
+
 body
     color: $body-color
     background: $body-background-color
@@ -17,7 +20,7 @@ body
 main
     // Create padding-top for fixed header under md
     @include media-breakpoint-down(md)
-        padding-top: get-header-height(md)
+        padding-top: var(--header-height)
 
 figure
     margin: 0
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index b70c14a739ab42c72611fd04f6b1da8fe90e4e1d..d5625a43daecb6ffd53cdde05caad7e1765241c6 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -99,7 +99,7 @@ ol.programs
                 margin-top: 0
                 position: absolute
                 right: $grid-gutter
-            button, a
+            button, > a
                 display: flex
                 align-items: center
                 justify-content: space-between
@@ -150,7 +150,7 @@ ol.programs
                     grid-column: 6/13
                 > h2
                     $sticky-top-offset: 90px
-                    @include sticky(#{get-header-height(md)} + #{$sticky-top-offset})
+                    @include sticky($sticky-top-offset)
                     top: $sticky-top-offset
                     align-self: start
                     grid-column: 1/5