navigation frame

private/scss/modules/_footer.scss

@@ -17,6 +17,9 @@
     opacity: 1;
     transform: none;
   }
+  @media screen and (max-width: $medium_breakpoint) {
+    display: none;
+  }
 }
 
 .footer__content {
@@ -51,11 +54,23 @@
   height: em(60px);
   line-height: em(60px);
   border: none;
-  padding: 0 em(30px) !important;
-  .header__button__icon {
-    width: em(16px);
-    height: em(16px);
-    top: em(-1px);
-    margin-right: em(10px);
+  @media screen and (min-width: $medium_breakpoint + 1) {
+    padding: 0 em(30px) !important;
+    .header__button__icon {
+      width: em(16px);
+      height: em(16px);
+      top: em(-1px);
+      margin-right: em(10px);
+    }
+  }
+  @media screen and (max-width: $medium_breakpoint) {
+    position: relative;
+    left: 0 !important;
+    bottom: auto;
+    height: em(50px);
+    line-height: em(50px);
+    .header__button__icon {
+      padding: em(6px);
+    }
   }
 }

private/scss/modules/_header.scss

@@ -32,6 +32,9 @@
   .search_open & {
     display: none;
   }
+  @media screen and (max-width: $medium_breakpoint) {
+    display: none;
+  }
 }
 
 .header__logo {
@@ -68,10 +71,6 @@
   }
   @media screen and (max-width: $small_breakpoint) {
     padding: em(8px) em(10px) em(10px) em(10px);
-    img {
-      width: em(70px);
-      height: em(70px);
-    }
   }
   @media screen and (max-width: $tiny_breakpoint) {
     padding: em(4px) em(5px) em(8px) em(5px);
@@ -92,8 +91,28 @@
   margin-left: em(150px);
   top: 0;
   display: block;
+  transform: none;
+  transition: transform 0.5s;
+  @media screen and (max-width: 1060px) {
+    .navigation_open & {
+      transform: translateY(-100%);
+    }
+  }
   @media screen and (max-width: $medium_breakpoint) {
-    display: none;
+    display: block;
+    z-index: 10;
+    font-size: em(14px);
+    margin-left: em(115px);
+    transform: translateY(100%);
+    .navigation_open & {
+      transform: none;
+    }
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    margin-left: em(105px);
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    margin-left: em(80px);
   }
 }
 
@@ -201,9 +220,9 @@
     padding: 0 em(18px) 0 em(64px);
   }
   &.header__button--light {
-    padding: 0 em(15px);
-  }
-  &.header__button--light {
+    @media screen and (min-width: $medium_breakpoint + 1) {
+      padding: 0 em(15px);
+    }
     font-size: em(14px);
     font-weight: 400;
     color: $dark_gray;
@@ -346,13 +365,15 @@
     left: em(16px);
   }
   .header__button--light & {
-    position: relative;
-    top: 0;
-    right: 0;
-    left: 0;
-    display: inline-block;
-    vertical-align: middle;
-    width: auto;
+    @media screen and (min-width: $medium_breakpoint + 1) {
+      position: relative;
+      top: 0;
+      right: 0;
+      left: 0;
+      display: inline-block;
+      vertical-align: middle;
+      width: auto;
+    }
   }
   @media screen and (max-width: $small_breakpoint) {
     right: em(12px);

private/scss/modules/_navigation.scss

@@ -5,7 +5,6 @@
   left: 0;
   width: 100%;
   height: auto;
-  padding: em(50px) 0;
   transform: translateY(-100%);
   transition: transform 1s $easeInOutQuart;
   body.navigation_open & {
@@ -17,7 +16,7 @@
   width: 100%;
   min-height: 100vh;
   background: $white;
-  padding: em(80px);
+  padding: em(50px) 0;
   .social_media {
     display: inline-block;
     vertical-align: top;
@@ -28,10 +27,7 @@
     color: $white;
   }
   @media screen and (max-width: $medium_breakpoint) {
-    padding: em(60px);
-  }
-  @media screen and (max-width: $small_breakpoint) {
-    padding: em(30px);
+    padding-bottom: 0;
   }
 }
 
@@ -121,4 +117,26 @@
 
 .navigation__list__meta--bottom {
   bottom: 0;
+}
+
+.navigation__footer {
+  display: none;
+  .header__button {
+    width: 100%;
+    border: none;
+    border-top: 1px solid $medium_light_gray;
+    .search_open &, .navigation_open & {
+      transform: none;
+    }
+  }
+  @media screen and (max-width: $medium_breakpoint) {
+    display: block;
+  }
+}
+
+.navigation__meta {
+  background: $light_gray;
+  .header__button {
+    background: none;
+  }
 }