cosmetic changes in the header

src/css/header.css

@@ -14,6 +14,18 @@ html.is-clipped--navbar {
   padding-top: var(--navbar-height);
 } */
 
+.navbar-scrollable {
+  background: var(--navbar-background);
+  color: var(--navbar-font-color);
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  height: calc(var(--navbar-height) / 2);
+  top: var(--globan-height);
+  width: 100%;
+  z-index: var(--z-index-navbar);
+  display: flex;
+  flex-direction: column;
+}
+
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
@@ -24,6 +36,7 @@ html.is-clipped--navbar {
   z-index: var(--z-index-navbar);
   display: flex;
   flex-direction: column;
+  border-bottom: 6px solid var(--color-OP-green);
 }
 
 .navbar a {

src/partials/header.hbs

@@ -1,36 +1,36 @@
-
 {{>header-scripts}}
 
-  <div class="eu-flag">
-         <nav class="navbar">
-                <div class="navbar-brand">
+<div class="eu-flag">
+    <nav class="navbar-scrollable">
+        <div class="navbar-brand">
 
             <div class="eu-emblem" style="display: inline-block;">
                 <!-- flag and logo-->
-                <div class="eu-emblem-std-en" ><a href="https://european-union.europa.eu/index_en"><span></span></a></div>
+                <div class="eu-emblem-std-en"><a href="https://european-union.europa.eu/index_en"><span></span></a>
+                </div>
             </div>
         </div>
-         <div class="sep-frame">
+        <div class="sep-frame">
             <div class="rect-grey"></div>
         </div>
-        </nav>
+    </nav>
 
-    </div>
+</div>
 
-    <div class="eu-tenders">
-         <nav class="navbar">
-          <div class="text-eu-tenders">EU tenders</div>
+<div class="eu-tenders">
+    <nav class="navbar">
+        <div class="text-eu-tenders">EU tenders</div>
 
         <div id="topbar-nav" class="navbar-menu">
             <div class="text-eu-subtext-text">TED Developer Docs</div>
             <div class="text-eu-subtext-label">Documentation for TED developers and eSenders</div>
             <div class="navbar-end">
-                    {{#if env.SEARCH_ENABLED}}
-                    <div class="navbar-item search">
-                        <input id="search-input" type="text" placeholder="Search docs">
-                    </div>
-                    {{/if}}
+                {{#if env.SEARCH_ENABLED}}
+                <div class="navbar-item search">
+                    <input id="search-input" type="text" placeholder="Search docs">
+                </div>
+                {{/if}}
             </div>
         </div>
-        </nav>
-    </div>
+    </nav>
+</div>