Fix academicpages#1920 by allowing text to wrap

Author: dgrahn

_sass/_masthead.scss

@@ -52,7 +52,7 @@
   white-space: nowrap;
 
   &--lg {
-    padding-right: 2em;
+    padding-right: 3em;
     font-weight: 700;
   }
 }

_sass/_navigation.scss

@@ -191,14 +191,15 @@
 
   button {
     position: absolute;
-    height: 100%;
+    height: 2.5rem;
     right: 0;
     padding: 0 0.5rem;
     border: 0;
     outline: none;
     background-color: $primary-color;
     color: #fff;
     cursor: pointer;
+    z-index: 100;
   }
 
   .visible-links {
@@ -210,6 +211,7 @@
 
       &:first-child {
         font-weight: bold;
+        text-wrap: wrap;
 
         a {
           margin-left: 0;

assets/js/main.min.js

@@ -23,7 +23,7 @@ function updateNav() {
     breaks.push($vlinks.width());
 
     // Move item to the hidden list
-    $vlinks.children().last().prependTo($hlinks);
+    $vlinks.children('*:not(.masthead__menu-item--lg)').last().prependTo($hlinks);
 
     // Show the dropdown btn
     if($btn.hasClass('hidden')) {