Add "priority plus" navigation pattern for masthead links

_includes/masthead.html

@@ -1,10 +1,12 @@
 <div class="masthead">
   <div class="site-name">
     <a href="{{ base_path }}/">{{ site.title }}</a>
-  </div><!-- /.site-name -->
+  </div>
+
   <div class="masthead__menu">
-    <nav id="site-nav">
-      <ul>
+    <nav id="site-nav" class="greedy-nav">
+      <button><div class="navicon"></div></button>
+      <ul class="visible-links">
         {% for link in site.data.navigation %}
           {% if link.url contains 'http' %}
             {% assign domain = '' %}
@@ -14,6 +16,7 @@
           <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
         {% endfor %}
       </ul>
+      <ul class="hidden-links hidden"></ul>
     </nav>
-  </div><!-- /.top-navigation -->
-</div><!-- /.navigation-wrapper -->
+  </div>
+</div>

assets/_scss/_masthead.scss

@@ -16,6 +16,9 @@
   @include breakpoint($x-large) {
     max-width: $x-large;
   }
+  nav {
+    z-index: 1;
+  }
   a {
     text-decoration: none;
   }
@@ -51,23 +54,6 @@
 .masthead__menu-item {
   display: block;
   list-style-type: none;
-    border-bottom: 1px solid $border-color;
   font-size: 16px;
-    &:last-child {
-      border-bottom: 0 solid transparent;
-    }
-    @include breakpoint($small) {
-      display: inline;
-      margin-right: 25px;
   white-space: nowrap;
-      border-bottom: 0 solid transparent;
-    }
-    a {
-      display: block;
-      padding: 10px 0;
-      @include breakpoint($small) {
-        display: inline;
-        padding: 0;
-      }
-    }
-  }
+}

assets/_scss/_navigation.scss

@@ -54,3 +54,104 @@
     font-weight: bold;
   }
 }
+
+
+/*
+   Priority plus navigation
+   ========================================================================== */
+
+.greedy-nav {
+  position: relative;
+  min-width: 250px;
+  background: #fff;
+
+  a {
+    display: block;
+    padding: 10px 20px;
+    text-decoration: none;
+  }
+
+  button {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    padding: 0 10px;
+    border: 0;
+    outline: none;
+    background-color: #000;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .visible-links {
+    display: inline-table;
+
+    li {
+      display: table-cell;
+
+      &:first-child {
+        font-weight: bold;
+        a {
+          padding-left: 0;
+          color: $text-color !important;
+        }
+      }
+
+      &:last-child {
+        a {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  .hidden-links {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 15px;
+    padding: 5px;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(#000, 0.25);
+
+    a {
+      font-size: 0.8em;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -11px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      border-color: $border-color transparent;
+      display: block;
+      z-index: 0;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: -10px;
+      right: 10px;
+      width: 0;
+      border-style: solid;
+      border-width: 0 10px 10px;
+      border-color: #fff transparent;
+      display: block;
+      z-index: 1;
+    }
+
+    li {
+      display: block;
+      border-bottom: 1px solid $border-color;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}

assets/_scss/_page.scss

@@ -9,6 +9,7 @@
   margin-top: 2em;
   padding-left: 2em;
   padding-right: 2em;
+  z-index: 0;
   @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;

assets/_scss/_sidebar.scss

@@ -151,31 +151,31 @@
     box-shadow: none;
   }
   &:before {
+    display: block;
     content: "";
     position: absolute;
+    top: -11px;
+    left: calc(50% - 10px);
+    width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
     border-color: $border-color transparent;
-    display: block;
-    width: 0;
     z-index: 0;
-    top: -11px;
-    left: calc(50% - 10px);
     @include breakpoint($large) {
       display: none;
     }
   }
   &:after {
+    display: block;
     content: "";
     position: absolute;
+    top: -10px;
+    left: calc(50% - 10px);
+    width: 0;
     border-style: solid;
     border-width: 0 10px 10px;
     border-color: #fff transparent;
-    display: block;
-    width: 0;
     z-index: 1;
-    top: -10px;
-    left: calc(50% - 10px);
     @include breakpoint($large) {
       display: none;
     }

assets/_scss/_utilities.scss

@@ -152,6 +152,62 @@ body:hover .visually-hidden button {
 }
 
 
+/*
+   Navicons
+   ========================================================================== */
+
+$navicon-width  : 32px;
+$navicon-height : 4px;
+
+.navicon {
+  position: relative;
+  width: $navicon-width;
+  height: $navicon-height;
+  background: #fff;
+  margin: auto;
+  transition: 0.3s;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: $navicon-width;
+    height: $navicon-height;
+    background: #fff;
+    transition: 0.3s;
+  }
+
+  &:before {
+    top: (-2 * $navicon-height);
+  }
+
+  &:after {
+    bottom: (-2 * $navicon-height);
+  }
+}
+
+.close .navicon {
+  // hide the middle line
+  background: transparent;
+
+  // overlay the lines by setting both their top values to 0
+  &:before, &:after{
+    transform-origin: 50% 50%;
+    top: 0;
+    width: $navicon-width;
+  }
+
+  // rotate the lines to form the x shape
+  &:before{
+    transform: rotate3d(0,0,1,45deg);
+  }
+  &:after{
+    transform: rotate3d(0,0,1,-45deg);
+  }
+}
+
+
 /*
    Sticky, fixed to top content
    ========================================================================== */

assets/js/_main.js

@@ -30,11 +30,10 @@ $(document).ready(function(){
 
   // Follow menu drop down
 
-$(".author__urls-wrapper button").on("click", function() {
+  $(".author__urls-wrapper button").on("click", function() {
     $(".author__urls").fadeToggle("fast", function() {});
     $(".author__urls-wrapper button").toggleClass("open");
-  $(".author__urls-wrapper button:after").css("content", "-");
-});
+  });
 
   // init smooth scroll
   $("a").smoothScroll({offset: -20});

assets/js/plugins/jquery.greedy-navigation.js

@@ -0,0 +1,72 @@
+/*
+* Greedy Navigation
+*
+* http://codepen.io/lukejacksonn/pen/PwmwWV
+*
+*/
+
+var $nav = $('#site-nav');
+var $btn = $('#site-nav button');
+var $vlinks = $('#site-nav .visible-links');
+var $hlinks = $('#site-nav .hidden-links');
+
+var breaks = [];
+
+function updateNav() {
+
+  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
+
+  // The visible list is overflowing the nav
+  if($vlinks.width() > availableSpace) {
+
+    // Record the width of the list
+    breaks.push($vlinks.width());
+
+    // Move item to the hidden list
+    $vlinks.children().last().prependTo($hlinks);
+
+    // Show the dropdown btn
+    if($btn.hasClass('hidden')) {
+      $btn.removeClass('hidden');
+    }
+
+  // The visible list is not overflowing
+  } else {
+
+    // There is space for another item in the nav
+    if(availableSpace > breaks[breaks.length-1]) {
+
+      // Move the item to the visible list
+      $hlinks.children().first().appendTo($vlinks);
+      breaks.pop();
+    }
+
+    // Hide the dropdown btn if hidden list is empty
+    if(breaks.length < 1) {
+      $btn.addClass('hidden');
+      $hlinks.addClass('hidden');
+    }
+  }
+
+  // Keep counter updated
+  $btn.attr("count", breaks.length);
+
+  // Recur if the visible list is still overflowing the nav
+  if($vlinks.width() > availableSpace) {
+    updateNav();
+  }
+
+}
+
+// Window listeners
+
+$(window).resize(function() {
+  updateNav();
+});
+
+$btn.on('click', function() {
+  $hlinks.toggleClass('hidden');
+  $(this).toggleClass('close');
+});
+
+updateNav();