TRI-283: start 768>

static/css/moover/header.css

@@ -5,6 +5,7 @@
   top: 0;
   width: 100vw;
   padding: 40px 5px;
+  transition: all 0.1s ease-in-out;
 }
 
 @media (max-width: 1304.98px) {
@@ -21,6 +22,13 @@
   }
 }
 
+.header.scrolled {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  box-shadow: var(--box-shadow-primary);
+  border-bottom: 1px solid var(--color-grey);
+}
+
 .header__grid, .header__list {
   display: flex;
   align-items: center;
@@ -36,7 +44,7 @@
 
 @media (max-width: 1304.98px) {
   .header__logo {
-    left: 14px;
+    left: 6px;
   }
 }
 
@@ -46,6 +54,12 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .header__logo {
+    left: -3px;
+  }
+}
+
 .header__nav {
   flex-grow: 1;
   max-width: 41%;
@@ -98,6 +112,12 @@
   left: -4px;
 }
 
+@media (max-width: 767.98px) {
+  .header .dropdown {
+    left: -8px;
+  }
+}
+
 .header .dropdown-content {
   right: 0;
   height: initial;