fix nav to scroll with the rest of the header

src/css/nav.css

@@ -65,14 +65,13 @@
     top: calc((var(--navbar-height) / 2) + var(--globan-height));
     box-shadow: none;
     position: sticky;
-    height: var(--nav-height--desktop);
   }
 }
 
 .nav .panels {
   display: flex;
   flex-direction: column;
-  height: inherit;
+  height: var(--nav-height--desktop);
 }
 
 html.is-clipped--nav {
@@ -181,6 +180,7 @@ html.is-clipped--nav {
   right: 0;
   bottom: 0;
   left: 0;
+  height: 50px;
 }
 
 .nav-panel-explore:not(:first-child) {

src/css/vars.css

@@ -317,7 +317,7 @@
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: calc(var(--navbar-height) - var(--globan-height));
-  --body-min-height: calc(100vh - var(--body-top));
+  --body-min-height: calc((100vh - var(--body-top)) + var(--globan-height));
   --nav-height: calc(var(--body-min-height) + var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);
   --nav-panel-menu-height: calc(100% - var(--drawer-height));

src/js/scroll-header.js

@@ -14,3 +14,20 @@ window.addEventListener('scroll', function () {
     blueDiv.style.position = 'relative'
   }
 })
+window.addEventListener('resize', function () {
+  //var nav = document.querySelector('.nav')
+  var euTenders = document.querySelector('.eu-tenders')
+  var nav = document.querySelector('.nav')
+  var panels = document.querySelector('.panels')
+
+  //var navHeight = parseFloat(window.getComputedStyle(nav).height)
+  var euTendersTop = parseFloat(window.getComputedStyle(euTenders).top)
+  // Calculate the remaining height of the viewport
+  var remainingHeight = window.innerHeight - euTendersTop + 18
+
+  // Now you can use remainingHeight for your needs
+  // For example, you can set it as a CSS variable
+  document.documentElement.style.setProperty('--nav-height--desktop', `${remainingHeight}px`)
+  nav.style.height = `${remainingHeight}px`
+  panels.style.height = `${remainingHeight}px`
+})

src/partials/nav-scripts.hbs

@@ -0,0 +1 @@
+<script src="{{{uiRootPath}}}/js/scroll-header.js"></script>

src/partials/nav.hbs

@@ -1,3 +1,5 @@
+{{>nav-scripts}}
+
 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">