Add "priority plus" navigation pattern for masthead links

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
    ========================================================================== */