Merge pull request #1051 from vazquez/header-update-large-breakpoint

Modifying nav style for large breakpoints

less/angular/components/navigation.less

@@ -85,6 +85,9 @@
   @media screen and (min-width: @screen-sm-min) {
     float: none;
   }
+  @media screen and (min-width: @screen-sm-min) {
+    margin-left: -12px;
+  }
   .col-3 {
     width: 33%;
   }
@@ -93,6 +96,9 @@
       text-align: center;
       width: 100%
     }
+    @media screen and (min-width: @screen-lg-min) {
+      text-align: left;
+    }
     > a {
       font-size: 1.4rem;
       padding: 1.8rem 1.5rem 1.8rem 3.2rem;
@@ -104,6 +110,9 @@
       @media screen and (min-width: @screen-sm-min) {
         width: 25%
       }
+      @media screen and (min-width: @screen-lg-min) {
+        width: 14%
+      }
       > a {
         height: auto;
         padding: 1.2rem 1.8rem;

less/components/navigation.less

@@ -32,6 +32,9 @@
   position: relative;
   color: @white;
   background-color: @navy;
+  @media screen and (min-width: @screen-lg-min){
+    margin-left: -6.8rem;
+  }
   .nav-icon {
     width: 100%;
     text-align: left;
@@ -42,6 +45,11 @@
       text-align: center;
       margin-left: -0.4rem;
     }
+    @media screen and (min-width: @screen-lg-min){
+      width: 16%;
+      text-align: left;
+      margin-left: -0.4rem;
+    }
     &:hover, &:active, &:focus, a.active {
       background-color: @lightnavy;
       .fa {