From 5c0dcb6563fe83e8ae20a0e4cd0c6c9050379976 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 13:58:30 +0100
Subject: [PATCH 01/10] Fixed underline position of menu items in mobile
 devices + housekeeping

---
 css/header.css   | 120 ++++++++++++++----------------
 sass/header.scss | 190 ++++++++++++++++++++++++-----------------------
 2 files changed, 152 insertions(+), 158 deletions(-)

diff --git a/css/header.css b/css/header.css
index d889d25..57eb08e 100644
--- a/css/header.css
+++ b/css/header.css
@@ -108,46 +108,45 @@
                 position: static; }
             header nav .navbar .container-fluid .navbar-collapse > .navbar-nav:first-child a::after {
               bottom: 0; } }
-body header .site-info + .site-nav nav {
-  float: none; }
-body header .site-info__text {
-  overflow-wrap: break-word; }
-  body header .site-info__text__name {
-    white-space: unset;
-    text-overflow: unset; }
-body header .site-nav .region-header > .name {
-  display: block; }
-body header .site-nav .region-header > .navbar-text {
-  display: block; }
-body header .site-nav section:only-child .active-language a .separator {
-  display: none; }
-
-header.menu-expanded {
+body header.menu-expanded {
   top: 0;
   position: fixed;
   width: 100%;
   z-index: 500; }
-  header.menu-expanded .header-wrapper {
+  body header.menu-expanded .header-wrapper {
     padding: 10px 5%; }
-    header.menu-expanded .header-wrapper .nav {
+    body header.menu-expanded .header-wrapper .nav {
       float: left; }
-  header.menu-expanded .site-info__logo {
+  body header.menu-expanded .site-info__logo {
     max-width: 25%;
     width: auto; }
-    header.menu-expanded .site-info__logo img {
+    body header.menu-expanded .site-info__logo img {
       max-height: 50px; }
-  header.menu-expanded .site-info__text__slogan {
+  body header.menu-expanded .site-info__text__slogan {
     display: none; }
-  header.menu-expanded .nav > li > a {
+  body header.menu-expanded .nav > li > a {
     line-height: 56px; }
-    header.menu-expanded .nav > li > a:after {
+    body header.menu-expanded .nav > li > a:after {
       bottom: 9px; }
-  header.menu-expanded .navbar-default .navbar-toggle:hover,
-  header.menu-expanded .navbar-default .navbar-toggle:focus,
-  header.menu-expanded .navbar-default .navbar-toggle {
+  body header.menu-expanded .navbar-default .navbar-toggle:hover,
+  body header.menu-expanded .navbar-default .navbar-toggle:focus,
+  body header.menu-expanded .navbar-default .navbar-toggle {
     top: 20%; }
-  header.menu-expanded .navbar-default.main-menu .navbar-toggle {
+  body header.menu-expanded .navbar-default.main-menu .navbar-toggle {
     top: 33px; }
+body header .site-info + .site-nav nav {
+  float: none; }
+body header .site-info__text {
+  overflow-wrap: break-word; }
+  body header .site-info__text__name {
+    white-space: unset;
+    text-overflow: unset; }
+body header .site-nav .region-header > .name {
+  display: block; }
+body header .site-nav .region-header > .navbar-text {
+  display: block; }
+body header .site-nav section:only-child .active-language a .separator {
+  display: none; }
 
 .toolbar-fixed header.menu-expanded {
   top: 39px;
@@ -313,49 +312,38 @@ header .site-info + .site-nav nav {
 .sticky-header .block-language .active-language a {
   line-height: 56px; }
 
-/* responsive */
 @media only screen and (max-width: 767px) {
-  .region-header {
-    text-align: left; }
-
+  header.menu-expanded .region-header > .block-language {
+    display: block; }
   header .site-info + .site-nav nav {
     width: 100%; }
-
-  .region-header > .block-language {
-    position: absolute;
-    display: none;
-    right: 30px;
-    margin: auto;
-    top: 67px; }
-    .region-header > .block-language .active-language a span.separator {
-      display: none; }
-
-  header .block-language ul.links {
-    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    top: 60px; }
-    header .block-language ul.links:before {
-      display: none; }
-
-  .menu-expanded .region-header > .block-language {
-    display: block; }
-
-  .main-menu .navbar-nav {
-    padding: 0 50px 0 0; } }
-/*
-element.style {
-  display: block;
-  position: static;
-  width: 100%;
-  background: teal;
-  box-shadow: 0 0 0 0;
-  padding: 5px 0;
-}
-*/
+  header .region-header {
+    text-align: left; }
+    header .region-header .main-menu .navbar-nav {
+      padding: 0 50px 0 0;
+      width: 100%; }
+      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:before {
+        top: 3px; }
+      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:after {
+        bottom: 4px; }
+    header .region-header > .block-language {
+      position: absolute;
+      display: none;
+      right: 30px;
+      margin: auto;
+      top: 67px; }
+      header .region-header > .block-language .active-language a span.separator {
+        display: none; }
+      header .region-header > .block-language ul.links {
+        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        top: 60px; }
+        header .region-header > .block-language ul.links:before {
+          display: none; } }
 header .main-menu .dropdown-menu a {
   display: block; }
   header .main-menu .dropdown-menu a .caret {
diff --git a/sass/header.scss b/sass/header.scss
index 81b2186..7dcd6a6 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -2,6 +2,7 @@
 // mixins variables
 @import 'variables.scss';
 
+// for tablet devices
 @media (min-width: 768px) and (max-width: 1080px) {
   header{
 
@@ -203,6 +204,53 @@ body{
   // header
   header {
 
+
+    &.menu-expanded {
+      top: 0;
+      position: fixed;
+      width: 100%;
+      z-index: 500;
+
+      .header-wrapper {
+
+        .nav{
+          float: left;
+        }
+        padding: 10px 5%;
+      }
+
+      .site-info__logo {
+        max-width: 25%;
+        width: auto;
+
+        img {
+          max-height: 50px;
+        }
+      }
+
+      .site-info__text__slogan {
+        display: none;
+      }
+
+      .nav>li>a {
+        line-height: 56px;
+
+        &:after {
+          bottom: 9px;
+        }
+      }
+
+      .navbar-default .navbar-toggle:hover,
+      .navbar-default .navbar-toggle:focus,
+      .navbar-default .navbar-toggle {
+        top: 20%;
+      }
+
+      .navbar-default.main-menu .navbar-toggle {
+        top: 33px;
+      }
+    }
+
     .site-info{
 
       &+.site-nav {
@@ -244,53 +292,6 @@ body{
   }
 
 
-//header : menu expanded
-header.menu-expanded {
-  top: 0;
-  position: fixed;
-  width: 100%;
-  z-index: 500;
-
-  .header-wrapper {
-
-    .nav{
-      float: left;
-    }
-    padding: 10px 5%;
-  }
-
-  .site-info__logo {
-    max-width: 25%;
-    width: auto;
-
-    img {
-      max-height: 50px;
-    }
-  }
-
-  .site-info__text__slogan {
-    display: none;
-  }
-
-  .nav>li>a {
-    line-height: 56px;
-
-    &:after {
-      bottom: 9px;
-    }
-  }
-
-  .navbar-default .navbar-toggle:hover,
-  .navbar-default .navbar-toggle:focus,
-  .navbar-default .navbar-toggle {
-    top: 20%;
-  }
-
-  .navbar-default.main-menu .navbar-toggle {
-    top: 33px;
-  }
-}
-
 .toolbar-fixed header.menu-expanded {
   top: 39px;
   margin-top: 0 !important;
@@ -481,63 +482,68 @@ header .site-info+.site-nav nav {
   line-height: 56px;
 }
 
-/* responsive */
-
+// Mobile devices
 @media only screen and (max-width: 767px) {
-  .region-header {
-    text-align: left;
-  }
+  header {
+    &.menu-expanded {
+      .region-header > .block-language {
+        display: block;
+      }
+    }
 
-  header .site-info+.site-nav nav {
-    width: 100%;
-  }
+    .site-info + .site-nav nav {
+      width: 100%;
+    }
 
-  .region-header>.block-language {
-    position: absolute;
-    display: none;
-    right: 30px;
-    margin: auto;
-    top: 67px;
+    .region-header {
+      text-align: left;
 
-    .active-language a span.separator {
-      display: none;
-    }
-  }
+      .main-menu {
+        .navbar-nav {
+          padding: 0 50px 0 0;
+          width: 100%;
+
+          .dropdown.open{
+            &>ul.dropdown-menu{
+              a{
+                &:before{
+                  top: 3px;
+                }
+                &:after{
+                  bottom: 4px;
+                }
+              }
+            }
+          }
 
-  header .block-language ul.links {
-    @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
-    top: 60px;
+        }
+      }
 
-    &:before {
-      display: none;
-    }
-  }
+      // language selector
+      &>.block-language {
+        position: absolute;
+        display: none;
+        right: 30px;
+        margin: auto;
+        top: 67px;
 
-  .menu-expanded {
-    .region-header>.block-language {
-      display: block;
-    }
-  }
+        .active-language a span.separator {
+          display: none;
+        }
+
+        ul.links {
+          @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
+          top: 60px;
 
-  .main-menu {
-    .navbar-nav {
-      padding: 0 50px 0 0;
+          &:before {
+            display: none;
+          }
+        }
+      }
     }
   }
 }
 
-//dropdown menu - multilevel
-/*
-element.style {
-  display: block;
-  position: static;
-  width: 100%;
-  background: teal;
-  box-shadow: 0 0 0 0;
-  padding: 5px 0;
-}
-*/
-
 header .main-menu .dropdown-menu {
   a {
 
-- 
GitLab


From d7ae74983da9663c35b2cc5c7c61058b2e4d2858 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 14:42:44 +0100
Subject: [PATCH 02/10] Fixed menu items in monitors + more housekeeping

---
 css/header.css   | 281 +++++++++++++-------------
 sass/header.scss | 499 +++++++++++++++++++++++------------------------
 2 files changed, 389 insertions(+), 391 deletions(-)

diff --git a/css/header.css b/css/header.css
index 57eb08e..32d01e2 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,113 +1,3 @@
-@media (min-width: 768px) and (max-width: 1080px) {
-  header .site-info {
-    width: 80%;
-    z-index: 1;
-    float: left;
-    min-height: 60px !important; }
-  header .site-nav {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    width: 100%;
-    z-index: 0;
-    height: 100%; }
-    header .site-nav .region-header {
-      height: 100%; }
-      header .site-nav .region-header .block-language {
-        position: absolute;
-        display: none;
-        right: 30px;
-        margin: auto;
-        top: 67px; }
-        header .site-nav .region-header .block-language .active-language a span.separator {
-          display: none; }
-        header .site-nav .region-header .block-language ul.links {
-          -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-          top: 60px; }
-          header .site-nav .region-header .block-language ul.links:before {
-            display: none; }
-  header.menu-expanded .region-header > .block-language {
-    display: block; }
-  header nav {
-    width: 100%; }
-    header nav .navbar {
-      height: 100%;
-      width: 100%; }
-      header nav .navbar .container-fluid {
-        height: 100%; }
-        header nav .navbar .container-fluid .navbar-header {
-          float: none;
-          height: 100%;
-          min-height: 70px; }
-          header nav .navbar .container-fluid .navbar-header .navbar-toggle {
-            display: block; }
-        header nav .navbar .container-fluid .navbar-collapse {
-          border-top: 1px solid transparent;
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-          overflow-y: scroll !important; }
-          header nav .navbar .container-fluid .navbar-collapse.collapse {
-            display: none !important;
-            padding: 0 3%; }
-            header nav .navbar .container-fluid .navbar-collapse.collapse.in {
-              display: block !important;
-              height: calc(100vh - 70px) !important;
-              padding: 10px 5%; }
-              header nav .navbar .container-fluid .navbar-collapse.collapse.in .navbar-nav {
-                float: left;
-                padding: 0 50px 0 0; }
-          header nav .navbar .container-fluid .navbar-collapse > .navbar-nav {
-            float: left;
-            width: 100%;
-            text-align: left; }
-            header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li {
-              vertical-align: top;
-              display: -ms-inline-grid;
-              display: inline-grid;
-              float: none;
-              padding: 10px;
-              width: 33%; }
-              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a {
-                width: fit-content;
-                line-height: 35px; }
-                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a:after {
-                  bottom: 0;
-                  transition: all 0.6s ease-in-out 0s;
-                  content: '';
-                  display: block;
-                  height: 2px;
-                  width: 50px;
-                  position: absolute;
-                  left: 0px; }
-              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li.dropdown .caret {
-                display: none; }
-              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li.dropdown:before {
-                bottom: 4px; }
-              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu {
-                padding: 0;
-                position: relative;
-                left: 10%;
-                box-shadow: none;
-                display: block; }
-                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a {
-                  width: fit-content;
-                  display: table;
-                  float: left; }
-                  header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:before {
-                    line-height: 30px; }
-                  header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:after {
-                    bottom: 6px; }
-                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li font {
-                  display: none; }
-              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > .dropdown-menu {
-                padding-top: 18px;
-                position: static; }
-            header nav .navbar .container-fluid .navbar-collapse > .navbar-nav:first-child a::after {
-              bottom: 0; } }
 body header.menu-expanded {
   top: 0;
   position: fixed;
@@ -141,6 +31,31 @@ body header .site-info__text {
   body header .site-info__text__name {
     white-space: unset;
     text-overflow: unset; }
+body header .site-nav .region-header nav.main-menu .dropdown-menu {
+  padding: 10px;
+  display: none;
+  position: absolute;
+  width: 100%;
+  box-shadow: 0 0 0 0;
+  left: unset;
+  right: -25px;
+  min-width: 200px; }
+  body header .site-nav .region-header nav.main-menu .dropdown-menu li {
+    margin: 0; }
+    body header .site-nav .region-header nav.main-menu .dropdown-menu li a {
+      display: block;
+      min-height: 25px;
+      padding: 0 0 0 20px;
+      margin: 0 0 10px 0;
+      white-space: normal;
+      width: fit-content; }
+      body header .site-nav .region-header nav.main-menu .dropdown-menu li a:after {
+        bottom: 1px; }
+  body header .site-nav .region-header nav.main-menu .dropdown-menu .caret {
+    display: none; }
+  body header .site-nav .region-header nav.main-menu .dropdown-menu:before {
+    display: none;
+    left: 150px; }
 body header .site-nav .region-header > .name {
   display: block; }
 body header .site-nav .region-header > .navbar-text {
@@ -312,6 +227,116 @@ header .site-info + .site-nav nav {
 .sticky-header .block-language .active-language a {
   line-height: 56px; }
 
+@media (min-width: 768px) and (max-width: 1080px) {
+  header .site-info {
+    width: 80%;
+    z-index: 1;
+    float: left;
+    min-height: 60px !important; }
+  header .site-nav {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 100%;
+    z-index: 0;
+    height: 100%; }
+    header .site-nav .region-header {
+      height: 100%; }
+      header .site-nav .region-header .block-language {
+        position: absolute;
+        display: none;
+        right: 30px;
+        margin: auto;
+        top: 67px; }
+        header .site-nav .region-header .block-language .active-language a span.separator {
+          display: none; }
+        header .site-nav .region-header .block-language ul.links {
+          -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+          top: 60px; }
+          header .site-nav .region-header .block-language ul.links:before {
+            display: none; }
+  header.menu-expanded .region-header > .block-language {
+    display: block; }
+  header nav {
+    width: 100%; }
+    header nav .navbar {
+      height: 100%;
+      width: 100%; }
+      header nav .navbar .container-fluid {
+        height: 100%; }
+        header nav .navbar .container-fluid .navbar-header {
+          float: none;
+          height: 100%;
+          min-height: 70px; }
+          header nav .navbar .container-fluid .navbar-header .navbar-toggle {
+            display: block; }
+        header nav .navbar .container-fluid .navbar-collapse {
+          border-top: 1px solid transparent;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          overflow-y: scroll !important; }
+          header nav .navbar .container-fluid .navbar-collapse.collapse {
+            display: none !important;
+            padding: 0 3%; }
+            header nav .navbar .container-fluid .navbar-collapse.collapse.in {
+              display: block !important;
+              height: calc(100vh - 70px) !important;
+              padding: 10px 5%; }
+              header nav .navbar .container-fluid .navbar-collapse.collapse.in .navbar-nav {
+                float: left;
+                padding: 0 50px 0 0; }
+          header nav .navbar .container-fluid .navbar-collapse > .navbar-nav {
+            float: left;
+            width: 100%;
+            text-align: left; }
+            header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li {
+              vertical-align: top;
+              display: -ms-inline-grid;
+              display: inline-grid;
+              float: none;
+              padding: 10px;
+              width: 33%; }
+              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a {
+                width: fit-content;
+                line-height: 35px; }
+                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a:after {
+                  bottom: 0;
+                  transition: all 0.6s ease-in-out 0s;
+                  content: '';
+                  display: block;
+                  height: 2px;
+                  width: 50px;
+                  position: absolute;
+                  left: 0px; }
+              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li.dropdown .caret {
+                display: none; }
+              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li.dropdown:before {
+                bottom: 4px; }
+              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu {
+                padding: 0;
+                position: relative;
+                left: 10%;
+                box-shadow: none;
+                display: block; }
+                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a {
+                  width: fit-content;
+                  display: table;
+                  float: left; }
+                  header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:before {
+                    line-height: 30px; }
+                  header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:after {
+                    bottom: 6px; }
+                header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li font {
+                  display: none; }
+              header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > .dropdown-menu {
+                padding-top: 18px;
+                position: static; }
+            header nav .navbar .container-fluid .navbar-collapse > .navbar-nav:first-child a::after {
+              bottom: 0; } }
 @media only screen and (max-width: 767px) {
   header.menu-expanded .region-header > .block-language {
     display: block; }
@@ -322,10 +347,12 @@ header .site-info + .site-nav nav {
     header .region-header .main-menu .navbar-nav {
       padding: 0 50px 0 0;
       width: 100%; }
-      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:before {
-        top: 3px; }
-      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:after {
-        bottom: 4px; }
+      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu {
+        position: relative; }
+        header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:before {
+          top: -1px; }
+        header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:after {
+          bottom: -3px; }
     header .region-header > .block-language {
       position: absolute;
       display: none;
@@ -344,31 +371,5 @@ header .site-info + .site-nav nav {
         top: 60px; }
         header .region-header > .block-language ul.links:before {
           display: none; } }
-header .main-menu .dropdown-menu a {
-  display: block; }
-  header .main-menu .dropdown-menu a .caret {
-    display: none; }
-header .main-menu .dropdown-menu .dropdown-menu {
-  display: block;
-  position: static;
-  width: 100%;
-  box-shadow: 0 0 0 0; }
-  header .main-menu .dropdown-menu .dropdown-menu li {
-    margin: 0; }
-  header .main-menu .dropdown-menu .dropdown-menu a {
-    min-height: 25px;
-    padding: 0 0 0 20px; }
-  header .main-menu .dropdown-menu .dropdown-menu:before {
-    display: none; }
-
-nav.main-menu .dropdown-menu {
-  left: unset;
-  right: -25px;
-  min-width: 200px; }
-  nav.main-menu .dropdown-menu:before {
-    left: 150px; }
-  nav.main-menu .dropdown-menu > li > a {
-    white-space: normal;
-    width: fit-content; }
 
 /*# sourceMappingURL=header.css.map */
diff --git a/sass/header.scss b/sass/header.scss
index 7dcd6a6..09333ff 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -2,209 +2,12 @@
 // mixins variables
 @import 'variables.scss';
 
-// for tablet devices
-@media (min-width: 768px) and (max-width: 1080px) {
-  header{
-
-    .site-info{
-      width: 80%;
-      z-index: 1;
-      float: left;
-      min-height: 60px !important;
-    }
-
-    .site-nav{
-      position: absolute;
-      top: 10px;
-      right: 0;
-      width: 100%;
-      z-index: 0;
-      height: 100%;
-
-      .region-header{
-        height: 100%;
-
-        .block-language{
-          position: absolute;
-          display: none;
-          right: 30px;
-          margin: auto;
-          top: 67px;
-
-          .active-language a span.separator {
-            display: none;
-          }
-
-          ul.links
-          {
-            @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
-            top: 60px;
-
-            &:before
-            {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &.menu-expanded {
-      .region-header>.block-language {
-        display: block;
-      }
-    }
-
-    nav{
-      width: 100%;
-
-      .navbar{
-        height: 100%;
-        width: 100%;
-
-        .container-fluid{
-          height: 100%;
-
-          .navbar-header {
-            float: none;
-            height: 100%;
-            min-height: 70px;
-
-            .navbar-toggle {
-              display: block;
-            }
-
-          }
-
-          // wrapper of expanded menu
-          .navbar-collapse{
-            border-top: 1px solid transparent;
-            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-            overflow-y: scroll !important;
-
-            &.collapse{
-              display: none!important;
-              padding: 0 3%;
-
-              &.in{
-                display:block !important;
-                height: calc(100vh - 70px) !important;
-                padding: 10px 5%;
-
-                .navbar-nav{
-                  float: left;
-                  padding: 0 50px 0 0;
-                }
-              }
-            }
-
-            // wrapper of menu items (without paddings)
-            &>.navbar-nav{
-              float: left;
-              width: 100%;
-              text-align: left;
-
-              // wrapper of each menu item
-              &>li{
-                vertical-align: top;
-                display: -ms-inline-grid;
-                display: inline-grid;
-                float: none;
-                padding: 10px;
-                width: 33%;
-
-                // first level menu item
-                &>a{
-                  width: fit-content;
-                  line-height: 35px;
-
-                  &:after{
-                    bottom: 0;
-                    transition: all 0.6s ease-in-out 0s;
-                    content: '';
-                    display: block;
-                    height: 2px;
-                    width: 50px;
-                    position: absolute;
-                    left: 0px;
-                  }
-                }
-
-                &.dropdown{
-                  .caret{
-                    display: none;
-                  }
-
-                  &:before{
-                    bottom: 4px;
-                  }
-
-                }
-
-                // all menu items
-                .dropdown-menu{
-                  padding: 0;
-                  position: relative;
-                  left: 10%;
-                  box-shadow: none;
-                  display: block;
-
-                  li{
-
-                    a{
-                      width: fit-content;
-                      display: table;
-                      float: left;
-
-                      &:before{
-                        line-height: 30px;
-                      }
-
-                      &:after{
-                        bottom: 6px;
-                      }
-
-                    }
-
-                    font{
-                      display: none;
-                    }
-
-                  }
-
-                }
-
-                // menu wrapper
-                &>.dropdown-menu{
-                  padding-top: 18px;
-                  position: static;
-                }
-
-              }
-
-              &:first-child{
-                a{
-                  &::after{
-                    bottom: 0;
-                  }
-                }
-              }
-            }
-
-
-          }
-        }
-      }
-    }
-  }
-}
 
 body{
 
   // header
   header {
 
-
     &.menu-expanded {
       top: 0;
       position: fixed;
@@ -251,6 +54,7 @@ body{
       }
     }
 
+    // Site Info => Title / logo / slogan
     .site-info{
 
       &+.site-nav {
@@ -273,6 +77,49 @@ body{
 
     .site-nav{
       .region-header {
+
+        nav.main-menu {
+          .dropdown-menu {
+            padding: 10px;
+            display: none;
+            position: absolute;
+            width: 100%;
+            box-shadow: 0 0 0 0;
+            left: unset;
+            right: -25px;
+            min-width: 200px;
+
+            li {
+              margin: 0;
+
+              a {
+                display: block;
+                min-height: 25px;
+                padding: 0 0 0 20px;
+                margin: 0 0 10px 0;
+                white-space: normal;
+                width: fit-content;
+
+                &:after{
+                  bottom: 1px;
+                }
+              }
+
+            }
+
+            .caret {
+              display: none;
+            }
+
+            &:before {
+              display: none;
+              left: 150px;
+
+            }
+          }
+        }
+
+
         &>.name {
           display: block;
         }
@@ -292,6 +139,8 @@ body{
   }
 
 
+
+
 .toolbar-fixed header.menu-expanded {
   top: 39px;
   margin-top: 0 !important;
@@ -482,6 +331,204 @@ header .site-info+.site-nav nav {
   line-height: 56px;
 }
 
+
+// for tablet devices
+@media (min-width: 768px) and (max-width: 1080px) {
+  header{
+
+    .site-info{
+      width: 80%;
+      z-index: 1;
+      float: left;
+      min-height: 60px !important;
+    }
+
+    .site-nav{
+      position: absolute;
+      top: 10px;
+      right: 0;
+      width: 100%;
+      z-index: 0;
+      height: 100%;
+
+      .region-header{
+        height: 100%;
+
+        .block-language{
+          position: absolute;
+          display: none;
+          right: 30px;
+          margin: auto;
+          top: 67px;
+
+          .active-language a span.separator {
+            display: none;
+          }
+
+          ul.links
+          {
+            @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
+            top: 60px;
+
+            &:before
+            {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &.menu-expanded {
+      .region-header>.block-language {
+        display: block;
+      }
+    }
+
+    nav{
+      width: 100%;
+
+      .navbar{
+        height: 100%;
+        width: 100%;
+
+        .container-fluid{
+          height: 100%;
+
+          .navbar-header {
+            float: none;
+            height: 100%;
+            min-height: 70px;
+
+            .navbar-toggle {
+              display: block;
+            }
+
+          }
+
+          // wrapper of expanded menu
+          .navbar-collapse{
+            border-top: 1px solid transparent;
+            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+            overflow-y: scroll !important;
+
+            &.collapse{
+              display: none!important;
+              padding: 0 3%;
+
+              &.in{
+                display:block !important;
+                height: calc(100vh - 70px) !important;
+                padding: 10px 5%;
+
+                .navbar-nav{
+                  float: left;
+                  padding: 0 50px 0 0;
+                }
+              }
+            }
+
+            // wrapper of menu items (without paddings)
+            &>.navbar-nav{
+              float: left;
+              width: 100%;
+              text-align: left;
+
+              // wrapper of each menu item
+              &>li{
+                vertical-align: top;
+                display: -ms-inline-grid;
+                display: inline-grid;
+                float: none;
+                padding: 10px;
+                width: 33%;
+
+                // first level menu item
+                &>a{
+                  width: fit-content;
+                  line-height: 35px;
+
+                  &:after{
+                    bottom: 0;
+                    transition: all 0.6s ease-in-out 0s;
+                    content: '';
+                    display: block;
+                    height: 2px;
+                    width: 50px;
+                    position: absolute;
+                    left: 0px;
+                  }
+                }
+
+                &.dropdown{
+                  .caret{
+                    display: none;
+                  }
+
+                  &:before{
+                    bottom: 4px;
+                  }
+
+                }
+
+                // all menu items
+                .dropdown-menu{
+                  padding: 0;
+                  position: relative;
+                  left: 10%;
+                  box-shadow: none;
+                  display: block;
+
+                  li{
+
+                    a{
+                      width: fit-content;
+                      display: table;
+                      float: left;
+
+                      &:before{
+                        line-height: 30px;
+                      }
+
+                      &:after{
+                        bottom: 6px;
+                      }
+
+                    }
+
+                    font{
+                      display: none;
+                    }
+
+                  }
+
+                }
+
+                // menu wrapper
+                &>.dropdown-menu{
+                  padding-top: 18px;
+                  position: static;
+                }
+
+              }
+
+              &:first-child{
+                a{
+                  &::after{
+                    bottom: 0;
+                  }
+                }
+              }
+            }
+
+
+          }
+        }
+      }
+    }
+  }
+}
+
 // Mobile devices
 @media only screen and (max-width: 767px) {
   header {
@@ -505,12 +552,14 @@ header .site-info+.site-nav nav {
 
           .dropdown.open{
             &>ul.dropdown-menu{
+              position: relative;
+
               a{
                 &:before{
-                  top: 3px;
+                  top: -1px;
                 }
                 &:after{
-                  bottom: 4px;
+                  bottom: -3px;
                 }
               }
             }
@@ -543,55 +592,3 @@ header .site-info+.site-nav nav {
     }
   }
 }
-
-header .main-menu .dropdown-menu {
-  a {
-
-    display: block;
-
-    .caret {
-      display: none;
-    }
-  }
-
-  .dropdown-menu {
-    display: block;
-    position: static;
-    width: 100%;
-    box-shadow: 0 0 0 0;
-
-    li {
-      margin: 0;
-    }
-
-    a {
-      min-height: 25px;
-      padding: 0 0 0 20px;
-
-    }
-
-    &:before {
-      display: none;
-    }
-  }
-}
-
-nav.main-menu{
-  .dropdown-menu{
-    left: unset;
-    right: -25px;
-    min-width: 200px;
-
-
-    &:before{
-      left: 150px;
-    }
-
-    &> li{
-      &> a{
-        white-space: normal;
-        width: fit-content;
-      }
-    }
-  }
-}
\ No newline at end of file
-- 
GitLab


From a51e956bf2d7d9e839ea4ec50d0527d6ca6a613c Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 15:55:10 +0100
Subject: [PATCH 03/10] Re-structured main menu in monitors

---
 css/header.css   | 37 ++++++++++++++------
 sass/header.scss | 89 +++++++++++++++++++++++++++++++++---------------
 2 files changed, 87 insertions(+), 39 deletions(-)

diff --git a/css/header.css b/css/header.css
index 32d01e2..a234f21 100644
--- a/css/header.css
+++ b/css/header.css
@@ -31,29 +31,44 @@ body header .site-info__text {
   body header .site-info__text__name {
     white-space: unset;
     text-overflow: unset; }
-body header .site-nav .region-header nav.main-menu .dropdown-menu {
+body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
+  left: unset;
+  right: -25px;
+  min-width: 200px; }
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu:before {
+    content: "";
+    width: 0px;
+    height: 0px;
+    background: transparent;
+    border-width: 12px;
+    border-style: solid;
+    position: absolute;
+    top: -24px;
+    left: 150px; }
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
+    position: absolute;
+    left: -100%;
+    top: -33%; }
+body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
   padding: 10px;
   display: none;
   position: absolute;
   width: 100%;
-  box-shadow: 0 0 0 0;
-  left: unset;
-  right: -25px;
-  min-width: 200px; }
-  body header .site-nav .region-header nav.main-menu .dropdown-menu li {
+  box-shadow: 0 0 0 0; }
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
     margin: 0; }
-    body header .site-nav .region-header nav.main-menu .dropdown-menu li a {
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
       display: block;
       min-height: 25px;
       padding: 0 0 0 20px;
-      margin: 0 0 10px 0;
+      margin: 5px 0 10px 0;
       white-space: normal;
       width: fit-content; }
-      body header .site-nav .region-header nav.main-menu .dropdown-menu li a:after {
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
         bottom: 1px; }
-  body header .site-nav .region-header nav.main-menu .dropdown-menu .caret {
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
     display: none; }
-  body header .site-nav .region-header nav.main-menu .dropdown-menu:before {
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
     display: none;
     left: 150px; }
 body header .site-nav .region-header > .name {
diff --git a/sass/header.scss b/sass/header.scss
index 09333ff..51406c9 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -79,44 +79,77 @@ body{
       .region-header {
 
         nav.main-menu {
-          .dropdown-menu {
-            padding: 10px;
-            display: none;
-            position: absolute;
-            width: 100%;
-            box-shadow: 0 0 0 0;
-            left: unset;
-            right: -25px;
-            min-width: 200px;
-
-            li {
-              margin: 0;
-
-              a {
-                display: block;
-                min-height: 25px;
-                padding: 0 0 0 20px;
-                margin: 0 0 10px 0;
-                white-space: normal;
-                width: fit-content;
 
-                &:after{
-                  bottom: 1px;
+          ul.navbar-nav{
+
+            // only first level dropdowns
+            &>li.dropdown.open{
+
+              &>ul.dropdown-menu{
+
+                left: unset;
+                right: -25px;
+                min-width: 200px;
+
+                &:before{
+                  content: "";
+                  width: 0px;
+                  height: 0px;
+                  background: transparent;
+                  border-width: 12px;
+                  border-style: solid;
+                  position: absolute;
+                  top: -24px;
+                  left: 150px;
                 }
-              }
 
+                .dropdown-menu{
+                  position: absolute;
+                  left: -100%;
+                  top: -33%;
+                }
+              }
             }
 
-            .caret {
+            // all the dropdowns
+            .dropdown-menu {
+              padding: 10px;
               display: none;
-            }
+              position: absolute;
+              width: 100%;
+              box-shadow: 0 0 0 0;
 
-            &:before {
-              display: none;
-              left: 150px;
+              li {
+                margin: 0;
 
+                a {
+                  display: block;
+                  min-height: 25px;
+                  padding: 0 0 0 20px;
+                  margin: 5px 0 10px 0;
+                  white-space: normal;
+                  width: fit-content;
+
+                  &:after{
+                    bottom: 1px;
+                  }
+                }
+
+              }
+
+              .caret {
+                display: none;
+              }
+
+              &:before {
+                display: none;
+                left: 150px;
+
+              }
             }
+
           }
+
         }
 
 
-- 
GitLab


From 6fb4eca7459148232474cd5556eb455cb6d1b041 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 18:20:53 +0100
Subject: [PATCH 04/10] Scaled header file for different screen sizes

---
 css/header.css   | 110 +++++++++++++------------
 sass/header.scss | 205 ++++++++++++++++++++++++++++++-----------------
 2 files changed, 189 insertions(+), 126 deletions(-)

diff --git a/css/header.css b/css/header.css
index a234f21..fc8cc83 100644
--- a/css/header.css
+++ b/css/header.css
@@ -31,24 +31,6 @@ body header .site-info__text {
   body header .site-info__text__name {
     white-space: unset;
     text-overflow: unset; }
-body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
-  left: unset;
-  right: -25px;
-  min-width: 200px; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu:before {
-    content: "";
-    width: 0px;
-    height: 0px;
-    background: transparent;
-    border-width: 12px;
-    border-style: solid;
-    position: absolute;
-    top: -24px;
-    left: 150px; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
-    position: absolute;
-    left: -100%;
-    top: -33%; }
 body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
   padding: 10px;
   display: none;
@@ -242,7 +224,46 @@ header .site-info + .site-nav nav {
 .sticky-header .block-language .active-language a {
   line-height: 56px; }
 
-@media (min-width: 768px) and (max-width: 1080px) {
+@media only screen and (max-width: 767px) {
+  body header .site-info + .site-nav nav {
+    width: 100%; }
+  body header.menu-expanded .region-header > .block-language {
+    display: block; }
+  body header .site-nav .region-header {
+    text-align: left; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav {
+      padding: 0 50px 0 0;
+      width: 100%; }
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open {
+        position: relative;
+        display: block; }
+        body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
+          position: static; }
+          body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu ul.dropdown-menu {
+            position: relative; }
+          body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:before {
+            top: -1px; }
+          body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:after {
+            bottom: -3px; }
+    body header .site-nav .region-header > .block-language {
+      position: absolute;
+      display: none;
+      right: 30px;
+      margin: auto;
+      top: 67px; }
+      body header .site-nav .region-header > .block-language .active-language a span.separator {
+        display: none; }
+      body header .site-nav .region-header > .block-language ul.links {
+        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        top: 60px; }
+        body header .site-nav .region-header > .block-language ul.links:before {
+          display: none; } }
+@media only screen and (min-width: 768px) and (max-width: 1080px) {
   header .site-info {
     width: 80%;
     z-index: 1;
@@ -352,39 +373,24 @@ header .site-info + .site-nav nav {
                 position: static; }
             header nav .navbar .container-fluid .navbar-collapse > .navbar-nav:first-child a::after {
               bottom: 0; } }
-@media only screen and (max-width: 767px) {
-  header.menu-expanded .region-header > .block-language {
-    display: block; }
-  header .site-info + .site-nav nav {
-    width: 100%; }
-  header .region-header {
-    text-align: left; }
-    header .region-header .main-menu .navbar-nav {
-      padding: 0 50px 0 0;
-      width: 100%; }
-      header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu {
-        position: relative; }
-        header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:before {
-          top: -1px; }
-        header .region-header .main-menu .navbar-nav .dropdown.open > ul.dropdown-menu a:after {
-          bottom: -3px; }
-    header .region-header > .block-language {
+@media only screen and (min-width: 1081px) {
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
+    left: unset;
+    right: -25px;
+    min-width: 200px; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu:before {
+      content: "";
+      width: 0px;
+      height: 0px;
+      background: transparent;
+      border-width: 12px;
+      border-style: solid;
       position: absolute;
-      display: none;
-      right: 30px;
-      margin: auto;
-      top: 67px; }
-      header .region-header > .block-language .active-language a span.separator {
-        display: none; }
-      header .region-header > .block-language ul.links {
-        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        top: 60px; }
-        header .region-header > .block-language ul.links:before {
-          display: none; } }
+      top: -24px;
+      left: 150px; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
+      position: absolute;
+      left: -100%;
+      top: -33%; } }
 
 /*# sourceMappingURL=header.css.map */
diff --git a/sass/header.scss b/sass/header.scss
index 51406c9..4fe91b7 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -87,27 +87,6 @@ body{
 
               &>ul.dropdown-menu{
 
-                left: unset;
-                right: -25px;
-                min-width: 200px;
-
-                &:before{
-                  content: "";
-                  width: 0px;
-                  height: 0px;
-                  background: transparent;
-                  border-width: 12px;
-                  border-style: solid;
-                  position: absolute;
-                  top: -24px;
-                  left: 150px;
-                }
-
-                .dropdown-menu{
-                  position: absolute;
-                  left: -100%;
-                  top: -33%;
-                }
               }
             }
 
@@ -161,15 +140,15 @@ body{
           display: block;
         }
 
-    }
-    section:only-child .active-language a .separator {
-      display: none;
-    }
+      }
+      section:only-child .active-language a .separator {
+        display: none;
+      }
 
 
-      }
     }
   }
+}
 
 
 
@@ -365,8 +344,99 @@ header .site-info+.site-nav nav {
 }
 
 
+// Mobile devices
+@media only screen and (max-width: 767px) {
+
+
+  body {
+
+    // header
+    header {
+
+      .site-info + .site-nav nav {
+        width: 100%;
+      }
+
+      &.menu-expanded {
+        .region-header > .block-language
+        {
+          display: block;
+        }
+      }
+
+      .site-nav {
+        .region-header {
+          text-align: left;
+
+          nav.main-menu {
+
+            ul.navbar-nav {
+              padding: 0 50px 0 0;
+              width: 100%;
+
+              // only first level dropdowns
+              & > li.dropdown.open {
+                position: relative;
+                display: block;
+
+                & > ul.dropdown-menu {
+                  position: static;
+
+                  ul.dropdown-menu{
+                    position: relative;
+                  }
+
+                  a {
+                    &:before {
+                      top: -1px;
+                    }
+
+                    &:after {
+                      bottom: -3px;
+                    }
+                  }
+
+                }
+              }
+
+            }
+          }
+
+          // language selector
+          & > .block-language
+          {
+            position: absolute;
+            display: none;
+            right: 30px;
+            margin: auto;
+            top: 67px;
+
+            .active-language a span.separator
+            {
+              display: none;
+            }
+
+            ul.links
+            {
+              @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
+              top: 60px;
+
+              &:before
+              {
+                display: none;
+              }
+            }
+          }
+
+        }
+      }
+    }
+  }
+}
+
+
 // for tablet devices
-@media (min-width: 768px) and (max-width: 1080px) {
+@media only screen and (min-width: 768px) and (max-width: 1080px) {
   header{
 
     .site-info{
@@ -562,63 +632,50 @@ header .site-info+.site-nav nav {
   }
 }
 
-// Mobile devices
-@media only screen and (max-width: 767px) {
-  header {
-    &.menu-expanded {
-      .region-header > .block-language {
-        display: block;
-      }
-    }
+// Laptops + Desktops
+@media only screen and (min-width: 1081px){
 
-    .site-info + .site-nav nav {
-      width: 100%;
-    }
+  body{
 
-    .region-header {
-      text-align: left;
+    // header
+    header {
 
-      .main-menu {
-        .navbar-nav {
-          padding: 0 50px 0 0;
-          width: 100%;
+      .site-nav{
+        .region-header {
 
-          .dropdown.open{
-            &>ul.dropdown-menu{
-              position: relative;
+          nav.main-menu {
 
-              a{
-                &:before{
-                  top: -1px;
-                }
-                &:after{
-                  bottom: -3px;
-                }
-              }
-            }
-          }
+            ul.navbar-nav{
 
-        }
-      }
+              // only first level dropdowns
+              &>li.dropdown.open{
 
-      // language selector
-      &>.block-language {
-        position: absolute;
-        display: none;
-        right: 30px;
-        margin: auto;
-        top: 67px;
+                &>ul.dropdown-menu{
 
-        .active-language a span.separator {
-          display: none;
-        }
+                  left: unset;
+                  right: -25px;
+                  min-width: 200px;
 
-        ul.links {
-          @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
-          top: 60px;
+                  &:before{
+                    content: "";
+                    width: 0px;
+                    height: 0px;
+                    background: transparent;
+                    border-width: 12px;
+                    border-style: solid;
+                    position: absolute;
+                    top: -24px;
+                    left: 150px;
+                  }
 
-          &:before {
-            display: none;
+                  .dropdown-menu{
+                    position: absolute;
+                    left: -100%;
+                    top: -33%;
+                  }
+                }
+              }
+            }
           }
         }
       }
-- 
GitLab


From 2bef9bf83a1e6bf98462e1318579688e82e71a86 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 18:35:58 +0100
Subject: [PATCH 05/10] Fixed all sizes

---
 css/header.css   | 316 ++++++++++++++++++++++-------------------------
 sass/header.scss | 288 ++++++++++++++++++++----------------------
 2 files changed, 284 insertions(+), 320 deletions(-)

diff --git a/css/header.css b/css/header.css
index fc8cc83..6167a1e 100644
--- a/css/header.css
+++ b/css/header.css
@@ -25,38 +25,160 @@ body header.menu-expanded {
   body header.menu-expanded .navbar-default.main-menu .navbar-toggle {
     top: 33px; }
 body header .site-info + .site-nav nav {
-  float: none; }
+  float: none !important; }
 body header .site-info__text {
   overflow-wrap: break-word; }
   body header .site-info__text__name {
     white-space: unset;
-    text-overflow: unset; }
-body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
-  padding: 10px;
-  display: none;
-  position: absolute;
-  width: 100%;
-  box-shadow: 0 0 0 0; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
-    margin: 0; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
-      display: block;
-      min-height: 25px;
-      padding: 0 0 0 20px;
-      margin: 5px 0 10px 0;
-      white-space: normal;
-      width: fit-content; }
-      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
-        bottom: 1px; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
-    display: none; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
+    text-overflow: unset;
+    padding: 2px 0 0; }
+body header .site-nav .region-header {
+  text-align: right; }
+  body header .site-nav .region-header > nav, body header .site-nav .region-header > .block-language {
+    display: inline-block;
+    vertical-align: top; }
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
+    padding: 10px;
     display: none;
-    left: 150px; }
-body header .site-nav .region-header > .name {
-  display: block; }
-body header .site-nav .region-header > .navbar-text {
-  display: block; }
+    width: 100%;
+    box-shadow: 0 0 0 0; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
+      margin: 0; }
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
+        display: block;
+        min-height: 25px;
+        padding: 0 0 0 20px;
+        margin: 5px 0 10px 0;
+        white-space: normal;
+        width: fit-content; }
+        body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
+          bottom: 1px; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
+      display: none; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
+      display: none;
+      left: 150px; }
+  body header .site-nav .region-header > .name {
+    display: block; }
+  body header .site-nav .region-header > .navbar-text {
+    display: block; }
+  body header .site-nav .region-header .block-language {
+    position: relative; }
+    body header .site-nav .region-header .block-language h2.block-title {
+      display: none; }
+    body header .site-nav .region-header .block-language .active-language {
+      padding: 0 0 0 10px; }
+      body header .site-nav .region-header .block-language .active-language a {
+        -webkit-transition: all 0.3s ease-in-out 0s;
+        -khtml-transition: all 0.3s ease-in-out 0s;
+        -moz-transition: all 0.3s ease-in-out 0s;
+        -ms-transition: all 0.3s ease-in-out 0s;
+        -o-transition: all 0.3s ease-in-out 0s;
+        transition: all 0.3s ease-in-out 0s;
+        font-size: 16px;
+        font-size: 1.6rem;
+        font-family: "opensans-bold";
+        line-height: 76px;
+        position: relative;
+        text-transform: uppercase; }
+        body header .site-nav .region-header .block-language .active-language a:after {
+          -webkit-transition: width 0.3s ease-in-out 0s;
+          -khtml-transition: width 0.3s ease-in-out 0s;
+          -moz-transition: width 0.3s ease-in-out 0s;
+          -ms-transition: width 0.3s ease-in-out 0s;
+          -o-transition: width 0.3s ease-in-out 0s;
+          transition: width 0.3s ease-in-out 0s;
+          content: '';
+          display: block;
+          height: 2px;
+          width: 0%;
+          position: absolute;
+          bottom: -10px;
+          left: 0; }
+        body header .site-nav .region-header .block-language .active-language a:hover {
+          background: transparent; }
+          body header .site-nav .region-header .block-language .active-language a:hover:after {
+            width: 100%; }
+        body header .site-nav .region-header .block-language .active-language a:focus {
+          background: transparent; }
+        body header .site-nav .region-header .block-language .active-language a span.separator {
+          position: absolute;
+          left: -20px;
+          top: -2px;
+          line-height: 21px; }
+        body header .site-nav .region-header .block-language .active-language a span.caret {
+          position: absolute;
+          right: -20px;
+          top: 49%; }
+    body header .site-nav .region-header .block-language > ul.links {
+      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+      filter: alpha(opacity=0);
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+      -webkit-opacity: 0;
+      -khtml-opacity: 0;
+      -moz-opacity: 0;
+      -ms-opacity: 0;
+      -o-opacity: 0;
+      opacity: 0;
+      list-style: none;
+      margin: 0;
+      padding: 10px 12px;
+      position: absolute;
+      top: 80px; }
+      body header .site-nav .region-header .block-language > ul.links::before {
+        left: unset;
+        right: 10px;
+        top: -23px;
+        content: '';
+        width: 0px;
+        height: 0px;
+        background: transparent;
+        border-width: 12px;
+        border-style: solid;
+        position: absolute; }
+      body header .site-nav .region-header .block-language > ul.links a {
+        font-size: 16px;
+        font-size: 1.6rem;
+        font-family: "opensans-bold";
+        padding: 0;
+        line-height: 25px;
+        display: block;
+        text-transform: uppercase;
+        position: relative; }
+        body header .site-nav .region-header .block-language > ul.links a:after {
+          -webkit-transition: width 0.3s ease-in-out 0s;
+          -khtml-transition: width 0.3s ease-in-out 0s;
+          -moz-transition: width 0.3s ease-in-out 0s;
+          -ms-transition: width 0.3s ease-in-out 0s;
+          -o-transition: width 0.3s ease-in-out 0s;
+          transition: width 0.3s ease-in-out 0s;
+          content: '';
+          display: block;
+          height: 2px;
+          width: 0%;
+          position: absolute;
+          bottom: -4px;
+          left: 0; }
+        body header .site-nav .region-header .block-language > ul.links a:hover {
+          background: transparent; }
+          body header .site-nav .region-header .block-language > ul.links a:hover:after {
+            width: 100%; }
+        body header .site-nav .region-header .block-language > ul.links a:focus {
+          background: transparent; }
+      body header .site-nav .region-header .block-language > ul.links.language-expanded {
+        filter: alpha(opacity=100);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+        -webkit-opacity: 1;
+        -khtml-opacity: 1;
+        -moz-opacity: 1;
+        -ms-opacity: 1;
+        -o-opacity: 1;
+        opacity: 1; }
 body header .site-nav section:only-child .active-language a .separator {
   display: none; }
 
@@ -79,152 +201,16 @@ body header .site-nav section:only-child .active-language a .separator {
   .sticky-header header .site-info img {
     left: 0; }
 
-header .nav > li {
-  margin: 0 20px; }
-  header .nav > li:nth-last-child(2) {
-    margin-right: 35px; }
-
-header .site-info__text__name {
-  padding: 2px 0 0; }
-
-header .site-info + .site-nav nav {
-  float: none !important; }
-
-.region-header {
-  text-align: right; }
-  .region-header > nav, .region-header > .block-language {
-    display: inline-block;
-    vertical-align: top; }
-
 .sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
   top: 32px; }
 
-@media only screen and (max-width: 767px) {
-  .sticky-header:not(.open-cern-menu) header .nav > li > a {
-    line-height: 35px !important; } }
-.block-language {
-  position: relative; }
-  .block-language h2.block-title {
-    display: none; }
-  .block-language .active-language {
-    padding: 0 0 0 10px; }
-    .block-language .active-language a {
-      -webkit-transition: all 0.3s ease-in-out 0s;
-      -khtml-transition: all 0.3s ease-in-out 0s;
-      -moz-transition: all 0.3s ease-in-out 0s;
-      -ms-transition: all 0.3s ease-in-out 0s;
-      -o-transition: all 0.3s ease-in-out 0s;
-      transition: all 0.3s ease-in-out 0s;
-      font-size: 16px;
-      font-size: 1.6rem;
-      font-family: "opensans-bold";
-      line-height: 76px;
-      position: relative;
-      text-transform: uppercase; }
-      .block-language .active-language a:after {
-        -webkit-transition: width 0.3s ease-in-out 0s;
-        -khtml-transition: width 0.3s ease-in-out 0s;
-        -moz-transition: width 0.3s ease-in-out 0s;
-        -ms-transition: width 0.3s ease-in-out 0s;
-        -o-transition: width 0.3s ease-in-out 0s;
-        transition: width 0.3s ease-in-out 0s;
-        content: '';
-        display: block;
-        height: 2px;
-        width: 0%;
-        position: absolute;
-        bottom: -10px;
-        left: 0; }
-      .block-language .active-language a:hover {
-        background: transparent; }
-        .block-language .active-language a:hover:after {
-          width: 100%; }
-      .block-language .active-language a:focus {
-        background: transparent; }
-      .block-language .active-language a span.separator {
-        position: absolute;
-        left: -20px;
-        top: -2px;
-        line-height: 21px; }
-      .block-language .active-language a span.caret {
-        position: absolute;
-        right: -20px;
-        top: 49%; }
-  .block-language > ul.links {
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-    filter: alpha(opacity=0);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    -webkit-opacity: 0;
-    -khtml-opacity: 0;
-    -moz-opacity: 0;
-    -ms-opacity: 0;
-    -o-opacity: 0;
-    opacity: 0;
-    list-style: none;
-    margin: 0;
-    padding: 10px 12px;
-    position: absolute;
-    top: 80px; }
-    .block-language > ul.links::before {
-      left: unset;
-      right: 10px;
-      top: -23px;
-      content: '';
-      width: 0px;
-      height: 0px;
-      background: transparent;
-      border-width: 12px;
-      border-style: solid;
-      position: absolute; }
-    .block-language > ul.links a {
-      font-size: 16px;
-      font-size: 1.6rem;
-      font-family: "opensans-bold";
-      padding: 0;
-      line-height: 25px;
-      display: block;
-      text-transform: uppercase;
-      position: relative; }
-      .block-language > ul.links a:after {
-        -webkit-transition: width 0.3s ease-in-out 0s;
-        -khtml-transition: width 0.3s ease-in-out 0s;
-        -moz-transition: width 0.3s ease-in-out 0s;
-        -ms-transition: width 0.3s ease-in-out 0s;
-        -o-transition: width 0.3s ease-in-out 0s;
-        transition: width 0.3s ease-in-out 0s;
-        content: '';
-        display: block;
-        height: 2px;
-        width: 0%;
-        position: absolute;
-        bottom: -4px;
-        left: 0; }
-      .block-language > ul.links a:hover {
-        background: transparent; }
-        .block-language > ul.links a:hover:after {
-          width: 100%; }
-      .block-language > ul.links a:focus {
-        background: transparent; }
-    .block-language > ul.links.language-expanded {
-      filter: alpha(opacity=100);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-      -webkit-opacity: 1;
-      -khtml-opacity: 1;
-      -moz-opacity: 1;
-      -ms-opacity: 1;
-      -o-opacity: 1;
-      opacity: 1; }
-
 /* sticky */
 .sticky-header .block-language .active-language a {
   line-height: 56px; }
 
 @media only screen and (max-width: 767px) {
+  body.sticky-header:not(.open-cern-menu) header .nav > li > a {
+    line-height: 35px !important; }
   body header .site-info + .site-nav nav {
     width: 100%; }
   body header.menu-expanded .region-header > .block-language {
diff --git a/sass/header.scss b/sass/header.scss
index 4fe91b7..e5535c3 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -59,7 +59,7 @@ body{
 
       &+.site-nav {
         nav {
-          float: none;
+          float: none !important; //important because this rule solely relies on the CSS load order which cannot be ensured
         }
       }
 
@@ -70,13 +70,23 @@ body{
         &__name{
           white-space: unset;
           text-overflow: unset;
+          padding: 2px 0 0;
         }
       }
 
     }
 
+    //Site Nav => the menu
     .site-nav{
       .region-header {
+        text-align: right;
+
+        &>nav,
+        &>.block-language {
+          display: inline-block;
+          vertical-align: top;
+        }
+
 
         nav.main-menu {
 
@@ -94,7 +104,6 @@ body{
             .dropdown-menu {
               padding: 10px;
               display: none;
-              position: absolute;
               width: 100%;
               box-shadow: 0 0 0 0;
 
@@ -140,6 +149,123 @@ body{
           display: block;
         }
 
+        // language switcher
+        .block-language {
+          position: relative;
+
+          h2.block-title {
+            display: none;
+          }
+
+          .active-language {
+            padding: 0 0 0 10px;
+
+            a {
+              @include transition(all 0.3s ease-in-out 0s);
+              @include font-size(1.6);
+              font-family: "opensans-bold";
+              line-height: 76px;
+              position: relative;
+              text-transform: uppercase;
+
+              &:after {
+                @include transition(width 0.3s ease-in-out 0s);
+                content: '';
+                display: block;
+                height: 2px;
+                width: 0%;
+                position: absolute;
+                bottom: -10px;
+                left: 0;
+              }
+
+              &:hover {
+                background: transparent;
+
+                &:after {
+                  width: 100%;
+                }
+              }
+
+              &:focus {
+                background: transparent;
+              }
+
+              span.separator {
+                position: absolute;
+                left: -20px;
+                top: -2px;
+                line-height: 21px;
+              }
+
+              span.caret {
+                position: absolute;
+                right: -20px;
+                top: 49%;
+              }
+            }
+          }
+
+          &>ul.links {
+            @include box-shadow(0, 6px, 12px, rgba(0, 0, 0, 0.17));
+            @include opacity(0);
+            list-style: none;
+            margin: 0;
+            padding: 10px 12px;
+            position: absolute;
+            top: 80px;
+
+            &::before {
+              left: unset;
+              right: 10px;
+              top: -23px;
+              content: '';
+              width: 0px;
+              height: 0px;
+              background: transparent;
+              border-width: 12px;
+              border-style: solid;
+              position: absolute;
+            }
+
+            a {
+              @include font-size(1.6);
+              font-family: "opensans-bold";
+              padding: 0;
+              line-height: 25px;
+              display: block;
+              text-transform: uppercase;
+              position: relative;
+
+              &:after {
+                @include transition(width 0.3s ease-in-out 0s);
+                content: '';
+                display: block;
+                height: 2px;
+                width: 0%;
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+              }
+
+              &:hover {
+                background: transparent;
+
+                &:after {
+                  width: 100%;
+                }
+              }
+
+              &:focus {
+                background: transparent;
+              }
+            }
+
+            &.language-expanded {
+              @include opacity(1);
+            }
+          }
+        }
       }
       section:only-child .active-language a .separator {
         display: none;
@@ -180,162 +306,10 @@ body{
   }
 }
 
-header .nav>li {
-
-
-  margin: 0 20px;
-
-  &:nth-last-child(2){
-    margin-right: 35px;
-  }
-}
-
-header .site-info__text__name {
-  padding: 2px 0 0;
-}
-
-// overriden CERN base
-header .site-info+.site-nav nav {
-  float: none !important; //imortant because this rule solely relies on the CSS load order which cannot be ensured
-}
-
-.region-header {
-  text-align: right;
-
-  &>nav,
-  &>.block-language {
-    display: inline-block;
-    vertical-align: top;
-  }
-}
-
 .sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
   top: 32px;
 }
 
-@media only screen and (max-width: 767px) {
-  .sticky-header:not(.open-cern-menu) header .nav>li>a {
-    line-height: 35px !important;
-  }
-}
-
-// language switcher
-.block-language {
-  position: relative;
-
-  h2.block-title {
-    display: none;
-  }
-
-  .active-language {
-    padding: 0 0 0 10px;
-
-    a {
-      @include transition(all 0.3s ease-in-out 0s);
-      @include font-size(1.6);
-      font-family: "opensans-bold";
-      line-height: 76px;
-      position: relative;
-      text-transform: uppercase;
-
-      &:after {
-        @include transition(width 0.3s ease-in-out 0s);
-        content: '';
-        display: block;
-        height: 2px;
-        width: 0%;
-        position: absolute;
-        bottom: -10px;
-        left: 0;
-      }
-
-      &:hover {
-        background: transparent;
-
-        &:after {
-          width: 100%;
-        }
-      }
-
-      &:focus {
-        background: transparent;
-      }
-
-      span.separator {
-        position: absolute;
-        left: -20px;
-        top: -2px;
-        line-height: 21px;
-      }
-
-      span.caret {
-        position: absolute;
-        right: -20px;
-        top: 49%;
-      }
-    }
-  }
-
-  &>ul.links {
-    @include box-shadow(0, 6px, 12px, rgba(0, 0, 0, 0.17));
-    @include opacity(0);
-    list-style: none;
-    margin: 0;
-    padding: 10px 12px;
-    position: absolute;
-    top: 80px;
-
-    &::before {
-      left: unset;
-      right: 10px;
-      top: -23px;
-      content: '';
-      width: 0px;
-      height: 0px;
-      background: transparent;
-      border-width: 12px;
-      border-style: solid;
-      position: absolute;
-    }
-
-    a {
-      @include font-size(1.6);
-      font-family: "opensans-bold";
-      padding: 0;
-      line-height: 25px;
-      display: block;
-      text-transform: uppercase;
-      position: relative;
-
-      &:after {
-        @include transition(width 0.3s ease-in-out 0s);
-        content: '';
-        display: block;
-        height: 2px;
-        width: 0%;
-        position: absolute;
-        bottom: -4px;
-        left: 0;
-      }
-
-      &:hover {
-        background: transparent;
-
-        &:after {
-          width: 100%;
-        }
-      }
-
-      &:focus {
-        background: transparent;
-      }
-    }
-
-    &.language-expanded {
-      @include opacity(1);
-    }
-  }
-}
 
 /* sticky */
 
@@ -350,6 +324,10 @@ header .site-info+.site-nav nav {
 
   body {
 
+    &.sticky-header:not(.open-cern-menu) header .nav>li>a {
+      line-height: 35px !important;
+    }
+
     // header
     header {
 
@@ -434,7 +412,6 @@ header .site-info+.site-nav nav {
   }
 }
 
-
 // for tablet devices
 @media only screen and (min-width: 768px) and (max-width: 1080px) {
   header{
@@ -668,6 +645,7 @@ header .site-info+.site-nav nav {
                     left: 150px;
                   }
 
+                  // all other dropdown menus
                   .dropdown-menu{
                     position: absolute;
                     left: -100%;
-- 
GitLab


From 393cdfc98c4638f1d27c83a8206db95a55df2952 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Wed, 4 Mar 2020 18:41:14 +0100
Subject: [PATCH 06/10] Added sticky header in general structure

---
 css/header.css   | 374 +++++++++++++++++++++++------------------------
 sass/header.scss |  47 +++---
 2 files changed, 213 insertions(+), 208 deletions(-)

diff --git a/css/header.css b/css/header.css
index 6167a1e..41c19da 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,186 +1,196 @@
-body header.menu-expanded {
-  top: 0;
-  position: fixed;
-  width: 100%;
-  z-index: 500; }
-  body header.menu-expanded .header-wrapper {
-    padding: 10px 5%; }
-    body header.menu-expanded .header-wrapper .nav {
-      float: left; }
-  body header.menu-expanded .site-info__logo {
-    max-width: 25%;
-    width: auto; }
-    body header.menu-expanded .site-info__logo img {
-      max-height: 50px; }
-  body header.menu-expanded .site-info__text__slogan {
-    display: none; }
-  body header.menu-expanded .nav > li > a {
+body {
+  /* sticky */ }
+  body.sticky-header header .site-info {
+    min-height: 56px; }
+    body.sticky-header header .site-info img {
+      left: 0; }
+  body.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
+    top: 32px; }
+  body.sticky-header .block-language .active-language a {
     line-height: 56px; }
-    body header.menu-expanded .nav > li > a:after {
-      bottom: 9px; }
-  body header.menu-expanded .navbar-default .navbar-toggle:hover,
-  body header.menu-expanded .navbar-default .navbar-toggle:focus,
-  body header.menu-expanded .navbar-default .navbar-toggle {
-    top: 20%; }
-  body header.menu-expanded .navbar-default.main-menu .navbar-toggle {
-    top: 33px; }
-body header .site-info + .site-nav nav {
-  float: none !important; }
-body header .site-info__text {
-  overflow-wrap: break-word; }
-  body header .site-info__text__name {
-    white-space: unset;
-    text-overflow: unset;
-    padding: 2px 0 0; }
-body header .site-nav .region-header {
-  text-align: right; }
-  body header .site-nav .region-header > nav, body header .site-nav .region-header > .block-language {
-    display: inline-block;
-    vertical-align: top; }
-  body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
-    padding: 10px;
-    display: none;
+  body header.menu-expanded {
+    top: 0;
+    position: fixed;
     width: 100%;
-    box-shadow: 0 0 0 0; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
-      margin: 0; }
-      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
-        display: block;
-        min-height: 25px;
-        padding: 0 0 0 20px;
-        margin: 5px 0 10px 0;
-        white-space: normal;
-        width: fit-content; }
-        body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
-          bottom: 1px; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
+    z-index: 500; }
+    body header.menu-expanded .header-wrapper {
+      padding: 10px 5%; }
+      body header.menu-expanded .header-wrapper .nav {
+        float: left; }
+    body header.menu-expanded .site-info__logo {
+      max-width: 25%;
+      width: auto; }
+      body header.menu-expanded .site-info__logo img {
+        max-height: 50px; }
+    body header.menu-expanded .site-info__text__slogan {
       display: none; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
+    body header.menu-expanded .nav > li > a {
+      line-height: 56px; }
+      body header.menu-expanded .nav > li > a:after {
+        bottom: 9px; }
+    body header.menu-expanded .navbar-default .navbar-toggle:hover,
+    body header.menu-expanded .navbar-default .navbar-toggle:focus,
+    body header.menu-expanded .navbar-default .navbar-toggle {
+      top: 20%; }
+    body header.menu-expanded .navbar-default.main-menu .navbar-toggle {
+      top: 33px; }
+  body header .site-info + .site-nav nav {
+    float: none !important; }
+  body header .site-info__text {
+    overflow-wrap: break-word; }
+    body header .site-info__text__name {
+      white-space: unset;
+      text-overflow: unset;
+      padding: 2px 0 0; }
+  body header .site-nav .region-header {
+    text-align: right; }
+    body header .site-nav .region-header > nav, body header .site-nav .region-header > .block-language {
+      display: inline-block;
+      vertical-align: top; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
+      padding: 10px;
       display: none;
-      left: 150px; }
-  body header .site-nav .region-header > .name {
-    display: block; }
-  body header .site-nav .region-header > .navbar-text {
-    display: block; }
-  body header .site-nav .region-header .block-language {
-    position: relative; }
-    body header .site-nav .region-header .block-language h2.block-title {
-      display: none; }
-    body header .site-nav .region-header .block-language .active-language {
-      padding: 0 0 0 10px; }
-      body header .site-nav .region-header .block-language .active-language a {
-        -webkit-transition: all 0.3s ease-in-out 0s;
-        -khtml-transition: all 0.3s ease-in-out 0s;
-        -moz-transition: all 0.3s ease-in-out 0s;
-        -ms-transition: all 0.3s ease-in-out 0s;
-        -o-transition: all 0.3s ease-in-out 0s;
-        transition: all 0.3s ease-in-out 0s;
-        font-size: 16px;
-        font-size: 1.6rem;
-        font-family: "opensans-bold";
-        line-height: 76px;
-        position: relative;
-        text-transform: uppercase; }
-        body header .site-nav .region-header .block-language .active-language a:after {
-          -webkit-transition: width 0.3s ease-in-out 0s;
-          -khtml-transition: width 0.3s ease-in-out 0s;
-          -moz-transition: width 0.3s ease-in-out 0s;
-          -ms-transition: width 0.3s ease-in-out 0s;
-          -o-transition: width 0.3s ease-in-out 0s;
-          transition: width 0.3s ease-in-out 0s;
-          content: '';
+      width: 100%;
+      box-shadow: 0 0 0 0; }
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
+        margin: 0; }
+        body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
           display: block;
-          height: 2px;
-          width: 0%;
-          position: absolute;
-          bottom: -10px;
-          left: 0; }
-        body header .site-nav .region-header .block-language .active-language a:hover {
-          background: transparent; }
-          body header .site-nav .region-header .block-language .active-language a:hover:after {
-            width: 100%; }
-        body header .site-nav .region-header .block-language .active-language a:focus {
-          background: transparent; }
-        body header .site-nav .region-header .block-language .active-language a span.separator {
-          position: absolute;
-          left: -20px;
-          top: -2px;
-          line-height: 21px; }
-        body header .site-nav .region-header .block-language .active-language a span.caret {
-          position: absolute;
-          right: -20px;
-          top: 49%; }
-    body header .site-nav .region-header .block-language > ul.links {
-      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-      filter: alpha(opacity=0);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-      -webkit-opacity: 0;
-      -khtml-opacity: 0;
-      -moz-opacity: 0;
-      -ms-opacity: 0;
-      -o-opacity: 0;
-      opacity: 0;
-      list-style: none;
-      margin: 0;
-      padding: 10px 12px;
-      position: absolute;
-      top: 80px; }
-      body header .site-nav .region-header .block-language > ul.links::before {
-        left: unset;
-        right: 10px;
-        top: -23px;
-        content: '';
-        width: 0px;
-        height: 0px;
-        background: transparent;
-        border-width: 12px;
-        border-style: solid;
-        position: absolute; }
-      body header .site-nav .region-header .block-language > ul.links a {
-        font-size: 16px;
-        font-size: 1.6rem;
-        font-family: "opensans-bold";
-        padding: 0;
-        line-height: 25px;
-        display: block;
-        text-transform: uppercase;
-        position: relative; }
-        body header .site-nav .region-header .block-language > ul.links a:after {
-          -webkit-transition: width 0.3s ease-in-out 0s;
-          -khtml-transition: width 0.3s ease-in-out 0s;
-          -moz-transition: width 0.3s ease-in-out 0s;
-          -ms-transition: width 0.3s ease-in-out 0s;
-          -o-transition: width 0.3s ease-in-out 0s;
-          transition: width 0.3s ease-in-out 0s;
+          min-height: 25px;
+          padding: 0 0 0 20px;
+          margin: 5px 0 10px 0;
+          white-space: normal;
+          width: fit-content; }
+          body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
+            bottom: 1px; }
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
+        display: none; }
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
+        display: none;
+        left: 150px; }
+    body header .site-nav .region-header > .name {
+      display: block; }
+    body header .site-nav .region-header > .navbar-text {
+      display: block; }
+    body header .site-nav .region-header .block-language {
+      position: relative; }
+      body header .site-nav .region-header .block-language h2.block-title {
+        display: none; }
+      body header .site-nav .region-header .block-language .active-language {
+        padding: 0 0 0 10px; }
+        body header .site-nav .region-header .block-language .active-language a {
+          -webkit-transition: all 0.3s ease-in-out 0s;
+          -khtml-transition: all 0.3s ease-in-out 0s;
+          -moz-transition: all 0.3s ease-in-out 0s;
+          -ms-transition: all 0.3s ease-in-out 0s;
+          -o-transition: all 0.3s ease-in-out 0s;
+          transition: all 0.3s ease-in-out 0s;
+          font-size: 16px;
+          font-size: 1.6rem;
+          font-family: "opensans-bold";
+          line-height: 76px;
+          position: relative;
+          text-transform: uppercase; }
+          body header .site-nav .region-header .block-language .active-language a:after {
+            -webkit-transition: width 0.3s ease-in-out 0s;
+            -khtml-transition: width 0.3s ease-in-out 0s;
+            -moz-transition: width 0.3s ease-in-out 0s;
+            -ms-transition: width 0.3s ease-in-out 0s;
+            -o-transition: width 0.3s ease-in-out 0s;
+            transition: width 0.3s ease-in-out 0s;
+            content: '';
+            display: block;
+            height: 2px;
+            width: 0%;
+            position: absolute;
+            bottom: -10px;
+            left: 0; }
+          body header .site-nav .region-header .block-language .active-language a:hover {
+            background: transparent; }
+            body header .site-nav .region-header .block-language .active-language a:hover:after {
+              width: 100%; }
+          body header .site-nav .region-header .block-language .active-language a:focus {
+            background: transparent; }
+          body header .site-nav .region-header .block-language .active-language a span.separator {
+            position: absolute;
+            left: -20px;
+            top: -2px;
+            line-height: 21px; }
+          body header .site-nav .region-header .block-language .active-language a span.caret {
+            position: absolute;
+            right: -20px;
+            top: 49%; }
+      body header .site-nav .region-header .block-language > ul.links {
+        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+        filter: alpha(opacity=0);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+        -webkit-opacity: 0;
+        -khtml-opacity: 0;
+        -moz-opacity: 0;
+        -ms-opacity: 0;
+        -o-opacity: 0;
+        opacity: 0;
+        list-style: none;
+        margin: 0;
+        padding: 10px 12px;
+        position: absolute;
+        top: 80px; }
+        body header .site-nav .region-header .block-language > ul.links::before {
+          left: unset;
+          right: 10px;
+          top: -23px;
           content: '';
+          width: 0px;
+          height: 0px;
+          background: transparent;
+          border-width: 12px;
+          border-style: solid;
+          position: absolute; }
+        body header .site-nav .region-header .block-language > ul.links a {
+          font-size: 16px;
+          font-size: 1.6rem;
+          font-family: "opensans-bold";
+          padding: 0;
+          line-height: 25px;
           display: block;
-          height: 2px;
-          width: 0%;
-          position: absolute;
-          bottom: -4px;
-          left: 0; }
-        body header .site-nav .region-header .block-language > ul.links a:hover {
-          background: transparent; }
-          body header .site-nav .region-header .block-language > ul.links a:hover:after {
-            width: 100%; }
-        body header .site-nav .region-header .block-language > ul.links a:focus {
-          background: transparent; }
-      body header .site-nav .region-header .block-language > ul.links.language-expanded {
-        filter: alpha(opacity=100);
-        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-        -webkit-opacity: 1;
-        -khtml-opacity: 1;
-        -moz-opacity: 1;
-        -ms-opacity: 1;
-        -o-opacity: 1;
-        opacity: 1; }
-body header .site-nav section:only-child .active-language a .separator {
-  display: none; }
+          text-transform: uppercase;
+          position: relative; }
+          body header .site-nav .region-header .block-language > ul.links a:after {
+            -webkit-transition: width 0.3s ease-in-out 0s;
+            -khtml-transition: width 0.3s ease-in-out 0s;
+            -moz-transition: width 0.3s ease-in-out 0s;
+            -ms-transition: width 0.3s ease-in-out 0s;
+            -o-transition: width 0.3s ease-in-out 0s;
+            transition: width 0.3s ease-in-out 0s;
+            content: '';
+            display: block;
+            height: 2px;
+            width: 0%;
+            position: absolute;
+            bottom: -4px;
+            left: 0; }
+          body header .site-nav .region-header .block-language > ul.links a:hover {
+            background: transparent; }
+            body header .site-nav .region-header .block-language > ul.links a:hover:after {
+              width: 100%; }
+          body header .site-nav .region-header .block-language > ul.links a:focus {
+            background: transparent; }
+        body header .site-nav .region-header .block-language > ul.links.language-expanded {
+          filter: alpha(opacity=100);
+          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+          -webkit-opacity: 1;
+          -khtml-opacity: 1;
+          -moz-opacity: 1;
+          -ms-opacity: 1;
+          -o-opacity: 1;
+          opacity: 1; }
+  body header .site-nav section:only-child .active-language a .separator {
+    display: none; }
 
 .toolbar-fixed header.menu-expanded {
   top: 39px;
@@ -196,18 +206,6 @@ body header .site-nav section:only-child .active-language a .separator {
 .toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
   top: 39px; }
 
-.sticky-header header .site-info {
-  min-height: 56px; }
-  .sticky-header header .site-info img {
-    left: 0; }
-
-.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
-  top: 32px; }
-
-/* sticky */
-.sticky-header .block-language .active-language a {
-  line-height: 56px; }
-
 @media only screen and (max-width: 767px) {
   body.sticky-header:not(.open-cern-menu) header .nav > li > a {
     line-height: 35px !important; }
diff --git a/sass/header.scss b/sass/header.scss
index e5535c3..abcebc1 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -5,6 +5,33 @@
 
 body{
 
+  /* sticky */
+  // header override header & sticky header
+  &.sticky-header{
+    header{
+      .site-info {
+        min-height: 56px;
+        img {
+          left: 0;
+        }
+      }
+    }
+
+    &:not(.open-cern-menu){
+      header{
+        .navbar-default.main-menu {
+          .navbar-toggle {
+            top: 32px;
+          }
+        }
+      }
+    }
+
+    .block-language .active-language a {
+      line-height: 56px;
+    }
+  }
+
   // header
   header {
 
@@ -278,7 +305,6 @@ body{
 
 
 
-
 .toolbar-fixed header.menu-expanded {
   top: 39px;
   margin-top: 0 !important;
@@ -297,25 +323,6 @@ body{
   top: 39px;
 }
 
-// header override header & sticky header
-.sticky-header header .site-info {
-  min-height: 56px;
-
-  img {
-    left: 0;
-  }
-}
-
-.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
-  top: 32px;
-}
-
-
-/* sticky */
-
-.sticky-header .block-language .active-language a {
-  line-height: 56px;
-}
 
 
 // Mobile devices
-- 
GitLab


From 7389786be26372d6293806feb6273e6709500f8c Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 5 Mar 2020 09:21:06 +0100
Subject: [PATCH 07/10] Added rest of items inside main function

---
 css/header.css   | 21 +++++++--------------
 sass/header.scss | 46 +++++++++++++++++++++++++---------------------
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/css/header.css b/css/header.css
index 41c19da..600cead 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,5 +1,12 @@
 body {
   /* sticky */ }
+  body.toolbar-fixed header .menu-expanded, body.toolbar-vertical header .menu-expanded {
+    top: 39px;
+    margin-top: 0 !important; }
+  body.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
+    top: 39px; }
+  body.toolbar-fixed.toolbar-tray-open header.menu-expanded {
+    top: 78px; }
   body.sticky-header header .site-info {
     min-height: 56px; }
     body.sticky-header header .site-info img {
@@ -192,20 +199,6 @@ body {
   body header .site-nav section:only-child .active-language a .separator {
     display: none; }
 
-.toolbar-fixed header.menu-expanded {
-  top: 39px;
-  margin-top: 0 !important; }
-
-.toolbar-vertical header.menu-expanded {
-  top: 39px;
-  margin-top: 0 !important; }
-
-.toolbar-fixed.toolbar-tray-open header.menu-expanded {
-  top: 78px; }
-
-.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
-  top: 39px; }
-
 @media only screen and (max-width: 767px) {
   body.sticky-header:not(.open-cern-menu) header .nav > li > a {
     line-height: 35px !important; }
diff --git a/sass/header.scss b/sass/header.scss
index abcebc1..4b9d930 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -5,6 +5,31 @@
 
 body{
 
+  &.toolbar-fixed,
+  &.toolbar-vertical{
+    header{
+      .menu-expanded {
+        top: 39px;
+        margin-top: 0 !important;
+      }
+    }
+  }
+
+
+  &.toolbar-fixed.toolbar-tray-open{
+
+    &.toolbar-vertical{
+      header.menu-expanded{
+        top: 39px;
+
+      }
+    }
+
+    header.menu-expanded{
+      top: 78px;
+    }
+  }
+
   /* sticky */
   // header override header & sticky header
   &.sticky-header{
@@ -304,27 +329,6 @@ body{
 }
 
 
-
-.toolbar-fixed header.menu-expanded {
-  top: 39px;
-  margin-top: 0 !important;
-}
-
-.toolbar-vertical header.menu-expanded {
-  top: 39px;
-  margin-top: 0 !important;
-}
-
-.toolbar-fixed.toolbar-tray-open header.menu-expanded {
-  top: 78px;
-}
-
-.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
-  top: 39px;
-}
-
-
-
 // Mobile devices
 @media only screen and (max-width: 767px) {
 
-- 
GitLab


From 93bb191aaa6dd962d7cc149356126e741e6d7b74 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 5 Mar 2020 09:45:54 +0100
Subject: [PATCH 08/10] Fixed caret being visible in laptops and desktops

---
 css/header.css   | 16 +++++-----
 sass/header.scss | 79 +++++++++++++++++++++++++++---------------------
 2 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/css/header.css b/css/header.css
index 600cead..e125fc4 100644
--- a/css/header.css
+++ b/css/header.css
@@ -54,25 +54,25 @@ body {
     body header .site-nav .region-header > nav, body header .site-nav .region-header > .block-language {
       display: inline-block;
       vertical-align: top; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu {
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
       padding: 10px;
       display: none;
       width: 100%;
       box-shadow: 0 0 0 0; }
-      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li {
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li {
         margin: 0; }
-        body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a {
+        body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li a {
           display: block;
           min-height: 25px;
           padding: 0 0 0 20px;
           margin: 5px 0 10px 0;
           white-space: normal;
           width: fit-content; }
-          body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu li a:after {
+          body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li a:after {
             bottom: 1px; }
-      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu .caret {
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu .caret {
         display: none; }
-      body header .site-nav .region-header nav.main-menu ul.navbar-nav .dropdown-menu:before {
+      body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu:before {
         display: none;
         left: 150px; }
     body header .site-nav .region-header > .name {
@@ -365,7 +365,9 @@ body {
       position: absolute;
       top: -24px;
       left: 150px; }
-    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li.dropdown > a span.caret {
+      display: none; }
+    body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li.dropdown ul.dropdown-menu {
       position: absolute;
       left: -100%;
       top: -33%; } }
diff --git a/sass/header.scss b/sass/header.scss
index 4b9d930..55642c2 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -149,45 +149,43 @@ body{
 
               &>ul.dropdown-menu{
 
-              }
-            }
+                // all the rest dropdowns
+                .dropdown-menu {
+                  padding: 10px;
+                  display: none;
+                  width: 100%;
+                  box-shadow: 0 0 0 0;
 
-            // all the dropdowns
-            .dropdown-menu {
-              padding: 10px;
-              display: none;
-              width: 100%;
-              box-shadow: 0 0 0 0;
+                  li {
+                    margin: 0;
 
-              li {
-                margin: 0;
+                    a {
+                      display: block;
+                      min-height: 25px;
+                      padding: 0 0 0 20px;
+                      margin: 5px 0 10px 0;
+                      white-space: normal;
+                      width: fit-content;
 
-                a {
-                  display: block;
-                  min-height: 25px;
-                  padding: 0 0 0 20px;
-                  margin: 5px 0 10px 0;
-                  white-space: normal;
-                  width: fit-content;
+                      &:after{
+                        bottom: 1px;
+                      }
+                    }
 
-                  &:after{
-                    bottom: 1px;
                   }
-                }
 
-              }
-
-              .caret {
-                display: none;
-              }
+                  .caret {
+                    display: none;
+                  }
 
-              &:before {
-                display: none;
-                left: 150px;
+                  &:before {
+                    display: none;
+                    left: 150px;
 
+                  }
+                }
               }
             }
-
           }
 
         }
@@ -637,7 +635,7 @@ body{
 
               // only first level dropdowns
               &>li.dropdown.open{
-
+                // 2nd level wrapper
                 &>ul.dropdown-menu{
 
                   left: unset;
@@ -656,11 +654,22 @@ body{
                     left: 150px;
                   }
 
-                  // all other dropdown menus
-                  .dropdown-menu{
-                    position: absolute;
-                    left: -100%;
-                    top: -33%;
+                  // all encapsulated sub-menus that can be expanded
+                  li.dropdown {
+
+                    >a{
+                      // do not display the carets in laptops and desktops
+                      span.caret{
+                        display: none;
+                      }
+                    }
+
+
+                    ul.dropdown-menu {
+                      position: absolute;
+                      left: -100%;
+                      top: -33%;
+                    }
                   }
                 }
               }
-- 
GitLab


From 894de9ee8a0a75787bb0d0669d5de65a88f295ba Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 5 Mar 2020 09:55:45 +0100
Subject: [PATCH 09/10] Fixed CERN Search overlay distance from top

---
 css/header.css   | 4 +++-
 sass/header.scss | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/css/header.css b/css/header.css
index e125fc4..38ecb85 100644
--- a/css/header.css
+++ b/css/header.css
@@ -370,6 +370,8 @@ body {
     body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li.dropdown ul.dropdown-menu {
       position: absolute;
       left: -100%;
-      top: -33%; } }
+      top: -33%; }
+  body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.cern-search #cern-search-overlay {
+    top: 37px; } }
 
 /*# sourceMappingURL=header.css.map */
diff --git a/sass/header.scss b/sass/header.scss
index 55642c2..67afa54 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -673,6 +673,14 @@ body{
                   }
                 }
               }
+
+              // the Search button
+              &>li.cern-search{
+                #cern-search-overlay{
+                  top: 37px;
+                }
+              }
+
             }
           }
         }
-- 
GitLab


From faebe1678dd8bccc0e91804cb85ce8036ffe40b7 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 5 Mar 2020 09:59:34 +0100
Subject: [PATCH 10/10] Updated changelog and theme version

---
 CHANGELOG.md       | 6 ++++++
 cernclean.info.yml | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 150b242..7c03b07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.1]
+
+- Fixed consistency of underline in mobile devices
+- Housekeeping in `header.scss` file (devide + encapsulate responsive cases)
+- Fixed alignment of likert elements
+
 ## [2.6.0] - 02-03-2020
 
 - Modified burger menu to be appearing when width <= 1080
diff --git a/cernclean.info.yml b/cernclean.info.yml
index 394366c..23a2189 100644
--- a/cernclean.info.yml
+++ b/cernclean.info.yml
@@ -2,7 +2,7 @@ name: CERN
 type: theme
 description: "CERN theme"
 core: 8.x
-version: 2.6.0
+version: 2.6.1-rc
 base theme: cernbase
 
 # libraries
-- 
GitLab