Fix: adjust header breakpoints to prevent page overflow

Author: ritorhymes

src/css/_navigation.scss

@@ -13,15 +13,15 @@
 #primary-menu {
   position: relative;
   padding: 0;
-  margin:0;
+  margin: 0;
 
-  #search-menu { 
+  #search-menu {
     position: initial;
   }
 }
 
 
-#primary-menu > li {
+#primary-menu>li {
   position: relative;
   opacity: 1;
   transition: opacity 200ms linear;
@@ -30,7 +30,7 @@
 
   a {
     display: inline-block;
-    padding:8px 7px;
+    padding: 8px 7px;
 
   }
 }
@@ -56,9 +56,9 @@
   }
 
   form {
-    position:absolute;
-    right:60px;
-    top:2px;
+    position: absolute;
+    right: 60px;
+    top: 2px;
     width: 0%;
     overflow: hidden;
     transition: width 300ms linear;
@@ -71,7 +71,7 @@
 
 #cta-download {
   position: relative;
-  top:-4px;
+  top: -4px;
 }
 
 
@@ -125,24 +125,24 @@
   width: 160px;
   top: 100px;
   left: -8px;
-  opacity: 0;;
+  opacity: 0;
+  ;
   font-weight: normal;
   border: solid 2px rgba(255, 255, 255, 0.5);
-  background-clip: padding-box; 
+  background-clip: padding-box;
   font-size: 0.9em;
   transition: all 40ms cubic-bezier(0.42, 0, 1, 1);
 }
 
-.site-header  li:hover {
+.site-header li:hover {
   .sub-menu {
     top: 100%;
     opacity: 1;
   }
 }
 
 .site-header nav .sub-menu {
-  a {
-  }
+  a {}
 }
 
 .hamburger-click {
@@ -154,7 +154,7 @@
   right: 40px;
 }
 
-@media screen and (max-width: 825px) {
+@media screen and (max-width: 1000px) {
   .header-social {
     display: none;
   }
@@ -174,21 +174,22 @@ input {
   margin-top: 4px;
 }
 
-@media screen and (max-width: 825px) {
+@media screen and (max-width: 1000px) {
+
   .hamburger-icon,
   .hamburger-click {
     display: block;
   }
 
-  input:checked ~ #primary-menu {
+  input:checked~#primary-menu {
     transform: none;
   }
 
   #cta-download {
     display: none;
   }
 
-  #primary-menu{
+  #primary-menu {
     -webkit-transform: none;
     transform: none;
     background: red;
@@ -202,27 +203,27 @@ input {
     font-size: 2em;
     margin: 0px;
     width: 100%;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255, 255, 255, 0.9);
     z-index: 10;
     transform-origin: 0% 0%;
     transform: translate(-120%, 0%);
-    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
 
     li {
       padding: 0;
     }
 
     .sub-menu {
-      top:0;
+      top: 0;
       opacity: 1;
       position: relative;
       width: 100%;
       padding: 0;
-      margin:0;
-    
+      margin: 0;
+
       a {
         font-size: 0.7em;
-        opacity:0.8;
+        opacity: 0.8;
       }
     }
   }
@@ -231,23 +232,22 @@ input {
     width: 100%;
     line-height: 0;
     font-size: 0.7em;
+
     .toggler {
       display: none;
     }
-  
+
     form {
       width: 100%;
       position: relative;
-      right:0px;
-      top:0px;
+      right: 0px;
+      top: 0px;
     }
-  
+
     input {
       width: 100%;
     }
   }
-  
-
-}
 
 
+}