TRI-283: start 768>

styles/moover/header.scss

@@ -5,17 +5,25 @@
   top: 0;
   width: 100vw;
   padding: 40px 5px;
+  transition: all 0.1s ease-in-out;
 
-      @media (max-width: 1304.98px) {
-        padding-top: 37px;
-        padding-bottom: 41px;
-    }
+  @media (max-width: 1304.98px) {
+    padding-top: 37px;
+    padding-bottom: 41px;
+  }
 
   @media (max-width: 991.98px) {
     padding-top: 19px;
     padding-bottom: 19px;
   }
 
+  &.scrolled {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    box-shadow: var(--box-shadow-primary);
+    border-bottom: 1px solid var(--color-grey);
+  }
+
   &__grid,
   &__list {
     display: flex;
@@ -33,12 +41,16 @@
     left: 5px;
 
     @media (max-width: 1304.98px) {
-      left: 14px;
+      left: 6px;
     }
 
     @media (max-width: 991.98px) {
       left: 0;
     }
+
+    @media (max-width: 767.98px) {
+      left: -3px;
+    }
   }
 
   &__nav {
@@ -84,6 +96,10 @@
   .dropdown {
     left: -4px;
 
+    @media (max-width: 767.98px) {
+      left: -8px;
+    }
+
     &-content {
       right: 0;
       height: initial;