asset/scss/global/_branding.scss

@@ -13,9 +13,15 @@
     background-position: center;
   }
   .logo {
+    @include breakpoint(small){
+      max-width: 6rem;
+      margin-top: -3rem; //half of .logo size
+    }
+    @include breakpoint(medium){
       max-width: 10rem;
       margin-top: -5rem; //half of .logo size
     }
+  }
   &.arc-hive{
     &::before {
       max-width: 10rem;

asset/scss/modules/_header.scss

@@ -6,13 +6,15 @@
       @include breakpoint(small){
         @include xy-cell(12);
         @include flex-align(center, middle);
-        padding: $global-padding*2 $global-padding;
-        min-width: 14rem;
         text-align: center;
       }
+      @include breakpoint (medium) {
+        padding: $global-padding*2 $global-padding;
+      }
       @include breakpoint(large){
         @include xy-cell(shrink);
         @include flex-align(left, middle);
+        // min-width: 14rem;
         text-align: unset;
       }
     }
@@ -32,10 +34,13 @@
           padding: 0;
           font-size: 0.8rem;
         }
-        .menu a {
+        .menu {
+          justify-content: center;
+          a {
             padding: $global-padding*0.7 $global-padding*0.5;
           }
         }
+      }
       @include breakpoint(medium) {
         menu {
           font-size: $global-font-size*1.5;