scrollable header - eu flag

src/css/header.css

@@ -1,29 +1,27 @@
-.globan {
+/* .globan {
   z-index: var(--z-index-globan) !important;
 }
 
 .header {
   z-index: var(--z-index-header);
-}
+} */
 
 html.is-clipped--navbar {
   overflow-y: hidden;
 }
 
-body {
+/* body {
   padding-top: var(--navbar-height);
-}
+} */
 
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
-  height: var(--navbar-height);
-  position: fixed;
-  top: 0;
+  height: calc(var(--navbar-height) / 2);
+  top: var(--globan-height);
   width: 100%;
   z-index: var(--z-index-navbar);
-  border-bottom: 6px solid var(--color-OP-green);
   display: flex;
   flex-direction: column;
 }
@@ -275,6 +273,7 @@ body {
   margin-top: 20px;
   margin-bottom: 20px;
   display: inline-block;
+  overflow-y: auto;
 }
 
 .eu-emblem-std-en {
@@ -356,3 +355,17 @@ body {
     display: none;
   }
 }
+
+.eu-tenders {
+  position: sticky;
+  top: 1.125rem;
+  left: 0;
+  height: 100px;
+  z-index: 5;
+  border-bottom: 6px solid var(--color-OP-green);
+}
+
+.eu-flag {
+  height: 100px;
+  z-index: 6;
+}

src/css/nav.css

@@ -20,8 +20,8 @@
 }
 
 .nav-container {
-  position: fixed;
-  top: var(--navbar-height);
+  position: sticky;
+  top: calc((var(--navbar-height) / 2) + var(--globan-height));
   left: 0;
   width: 100%;
   font-size: calc(17 / var(--rem-base) * 1rem);
@@ -51,8 +51,6 @@
 
 .nav {
   background: var(--nav-background);
-  position: relative;
-  top: var(--toolbar-height);
   height: var(--nav-height);
 }
 
@@ -64,7 +62,7 @@
 
 @media screen and (min-width: 1024px) {
   .nav {
-    top: var(--navbar-height);
+    top: calc((var(--navbar-height) / 2) + var(--globan-height));
     box-shadow: none;
     position: sticky;
     height: var(--nav-height--desktop);
@@ -159,7 +157,7 @@ html.is-clipped--nav {
   border: none;
   outline: none;
   line-height: inherit;
-  position: absolute;
+  position: sticky;
   height: calc(var(--nav-line-height) * 1em);
   width: calc(var(--nav-line-height) * 1em);
   margin-top: -0.05em;
@@ -179,8 +177,7 @@ html.is-clipped--nav {
   background: var(--nav-background);
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 0;
+  position: sticky;
   right: 0;
   bottom: 0;
   left: 0;

src/css/toolbar.css

@@ -8,7 +8,7 @@
   height: var(--toolbar-height);
   justify-content: flex-start;
   position: sticky;
-  top: var(--navbar-height);
+  top: calc((var(--navbar-height) / 2) + var(--globan-height));
   z-index: var(--z-index-toolbar);
 }
 

src/css/vars.css

@@ -316,14 +316,14 @@
   --navbar-height: calc(200 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
-  --body-top: var(--navbar-height);
+  --body-top: calc(var(--navbar-height) - var(--globan-height));
   --body-min-height: calc(100vh - var(--body-top));
-  --nav-height: calc(var(--body-min-height) - var(--toolbar-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));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
-  --toc-top: calc(var(--body-top) + var(--toolbar-height));
+  --toc-top: calc((var(--body-top) + var(--toolbar-height)));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
   --toc-width: calc(162 / var(--rem-base) * 1rem);
   --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
@@ -334,6 +334,5 @@
   --z-index-toolbar: 2;
   --z-index-page-version-menu: 3;
   --z-index-navbar: 4;
-  --z-index-header: 4;
-  --z-index-globan: 3;
+  --globan-height: 1.125rem;
 }

src/js/scroll-header.js

@@ -0,0 +1,16 @@
+window.addEventListener('scroll', function () {
+  //var redDiv = document.querySelector('.red-div')
+  var blueDiv = document.querySelector('.blue-div')
+  var scrollPosition = window.scrollY
+
+  // Get the height of the red div plus 1.125rem (18px)
+  var stopPosition = '18px'
+  blueDiv.style.zIndex = '40'
+
+  if (scrollPosition >= stopPosition) {
+    blueDiv.style.position = 'sticky'
+    blueDiv.style.top = stopPosition
+  } else {
+    blueDiv.style.position = 'relative'
+  }
+})

src/partials/header-scripts.hbs

@@ -1,3 +1,3 @@
 {{!-- Add header scripts here --}}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" crossorigin="anonymous"></script>
-<script defer src="https://europa.eu/webtools/load.js?globan=1110" type="text/javascript"></script>
+<script defer src="https://europa.eu/webtools/load.js?globan=1111" type="text/javascript"></script>

src/partials/header.hbs

@@ -1,13 +1,8 @@
-
 {{>header-scripts}}
 
-<header class="header">
-
-        <div class="container">
-<div>
-    <nav class="navbar">
-
-        <div class="navbar-brand">
+    <div class="eu-flag">
+         <nav class="navbar">
+                <div class="navbar-brand">
 
             <div class="eu-emblem" style="display: inline-block;">
                 <!-- flag and logo-->
@@ -18,6 +13,12 @@
          <div class="sep-frame">
             <div class="rect-grey"></div>
         </div>
+        </nav>
+
+    </div>
+
+    <div class="eu-tenders">
+         <nav class="navbar">
         <div class="text-eu-tenders">EU tenders</div>
 
         <div id="topbar-nav" class="navbar-menu">
@@ -31,5 +32,5 @@
                     {{/if}}
             </div>
         </div>
-    </nav>
-</div>
+        </nav>
+    </div>