diff --git a/sass/oscailte/base/_navigation.scss b/sass/oscailte/base/_navigation.scss
index 88666acdd2a..d043ff40514 100644
--- a/sass/oscailte/base/_navigation.scss
+++ b/sass/oscailte/base/_navigation.scss
@@ -14,7 +14,10 @@ body{ -webkit-animation: bugfix infinite 1s; }
 #toggle, .toggle { display: none; }
 .menu li { list-style: none; float:left;  }
 
-@media only screen and (max-width: $lap-end){
+$menu-collapse: 790px;
+
+// @media only screen and (max-width: $lap-end){
+@media only screen and (max-width: $menu-collapse){
   .menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
   .menu li { display: block; width: 100%; margin: 0; }
   .menu li a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@@ -90,7 +93,7 @@ header .grid {
   z-index: 20; 
 }
 
-@media only screen and (max-width: $lap-end){
+@media only screen and (max-width: $menu-collapse){
   .menu{
     background: $white;
     border-top:    1px solid $navigation-color;
@@ -111,15 +114,21 @@ header .grid {
     padding: 15px 15px 15px 25px;
   }
   
+  .toggle {
+    position: absolute;
+    top: 17px;
+    right: 10px;
+  }
+
   .toggle::after {
     @include border-radius(2px);
     @include box-sizing(border-box);
     @include transition(all 0.5s linear);
-    content: attr(data-open);
-    display: block;
+    font-family: "FontAwesome";
+    content: "\f0c9";
+    display: inline-block;
     width: 100%;
-    margin: 20px 0;
-    padding: 10px 50px;
+    padding: 10px 15px;
     background: $navigation-color;
     text-align: center;
     font-size: 12px;
@@ -142,17 +151,3 @@ header .grid {
     top: 0;
   }
 }
-
-@media only screen and (max-width: 479px){
-  .toggle {
-    display: inline-block;
-    position: absolute;
-    top: -3px;
-    right: 10px;
-  }
-  .toggle::after {
-    padding: 10px 15px;
-    font-family: "FontAwesome";
-    content: "\f0c9";
-  }
-}
\ No newline at end of file
diff --git a/source/_includes/custom/header.html b/source/_includes/custom/header.html
index c95bd73bec2..9addb5deaf2 100644
--- a/source/_includes/custom/header.html
+++ b/source/_includes/custom/header.html
@@ -1,10 +1,10 @@
-<div class="grid__item three-tenths lap-four-sixths palm-one-whole ha-title">
+<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
   <a href="{{ root_url }}/" class="site-title">
     <img width='40' src='{{ root_url }}/images/favicon-192x192.png'> {{ site.title }}
   </a>
 </div>
 
-<div class="grid__item seven-tenths lap-two-sixths palm-one-whole">
+<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
   <nav>
     {% include site/navigation.html %}
   </nav>