More awesome stuff. 🙌

assets/js/src/0_navigation.js

@@ -0,0 +1,40 @@
+(function ( $ ) {
+	$.neveNavigation = {
+		'init': function () {
+			this.repositionDropdowns();
+			this.handleResponsiveNav();
+		},
+		'repositionDropdowns': function () {
+			var windowWidth = window.innerWidth;
+			//Do nothing on mobile.
+			if ( windowWidth <= 768 ) {
+				return false;
+			}
+			//Do nothing without dropdowns.
+			var dropdowns = $( '.sub-menu .sub-menu' );
+			if ( dropdowns.length === 0 ) {
+				return false;
+			}
+			//Loop dropdowns and move them if needed.
+			$.each( dropdowns, function ( key, dropdown ) {
+				var submenu = $( dropdown );
+				var bounding = submenu.offset().left;
+				if ( /webkit.*mobile/i.test( navigator.userAgent ) ) {
+					bounding -= window.scrollX;
+				}
+				var dropdownWidth = submenu.outerWidth();
+				if ( bounding + dropdownWidth >= windowWidth ) {
+					$( dropdown ).css( { 'right': '100%', 'left': 'auto' } );
+				}
+			} );
+			return false;
+		},
+		'handleResponsiveNav': function () {
+			$( '.navbar-toggle' ).on( 'click touchstart', function () {
+
+			} );
+
+		}
+	};
+
+}( jQuery ));

assets/js/src/loader.js

@@ -0,0 +1,9 @@
+/**
+ * Handles the order for all the scripts.
+ * @param $
+ */
+var neveScripts = function ( $ ) {
+	$.neveNavigation.init();
+};
+
+neveScripts( jQuery );

assets/scss/elements/_footer.scss

@@ -1,19 +1,16 @@
 footer {
   background-color: #fff;
+  border-top: $muted-border;
 }
 
 .nv-footer-content, .nv-footer-widgets {
-  padding: $spacing-normal 0;
+  padding: $spacing 0;
 }
 
 .nv-footer-widgets + .nv-footer-content {
   padding-top: 0;
 }
 
 .nv-footer-content .footer-menu {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    margin-right: $spacing-small;
-  }
+  @include horizontal-list($spacing-sm);
 }

assets/scss/elements/_navigation.scss

@@ -1,3 +1,3 @@
-.navbar {
-  background-color: #fff;
-}
+@import "navigation/nav-brand";
+@import "navigation/nav-toggle";
+@import "navigation/nav-menu";

assets/scss/elements/navigation/_nav-brand.scss

@@ -0,0 +1,7 @@
+.site-logo{
+  max-width: 200px;
+  img {
+    max-height: 50px;
+    float: left;
+  }
+}

assets/scss/elements/navigation/_nav-menu.scss

@@ -0,0 +1,119 @@
+.nv-navbar {
+  background-color: $navbar_background_color;
+}
+
+.nv-nav-header {
+  display: flex;
+  padding: $spacing-xs 0;
+}
+
+#nv-primary-navigation {
+  max-height: 0;
+  overflow: scroll;
+}
+
+.site-logo, .navbar-toggle-wrapper {
+  flex: 1;
+}
+
+.navbar-toggle-wrapper {
+  justify-content: flex-end;
+  display: flex;
+}
+
+@mixin nav-menu--laptop() {
+  .nv-navbar {
+    padding: $spacing-sm 0;
+    border-bottom: $muted-border;
+  }
+
+  .nv-nav-wrap {
+    flex-direction: row;
+    align-items: center;
+  }
+  .nv-nav-header {
+    display: inherit;
+    padding: 0;
+  }
+
+  #nv-primary-navigation {
+    max-height: inherit;
+    overflow: inherit;
+    @include horizontal-list($spacing-sm);
+    justify-content: flex-end;
+    > li {
+      padding: $spacing-sm 0;
+      cursor: pointer;
+    }
+    li:hover > a {
+      color: $link_hover_color;
+    }
+    li {
+      position: relative;
+    }
+  }
+
+  .sub-menu {
+    z-index: 10;
+    visibility: hidden;
+    opacity: 0;
+    transition: $transition_default;
+    background-color: $navbar_background_color;
+    position: absolute;
+    border-top: 3px solid $link_color;
+    .sub-menu {
+      left: 100%;
+      right: auto;
+      top: -3px;
+    }
+    li {
+      border: $muted-border;
+      border-top: none;
+      a {
+        white-space: nowrap;
+        display: block;
+        padding: 10px;
+        width: auto;
+        min-width: 180px;
+      }
+    }
+    .menu-item-has-children {
+      > a:after {
+        @include caret(-1px);
+        border-color: $link_color;
+        transform: rotate(135deg);
+        transition: $transition_default;
+      }
+      &:hover > a:after {
+        border-color: $link-hover_color;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  .menu-item-has-children {
+    &:hover > .sub-menu {
+      display: block;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  #nv-primary-navigation > .menu-item-has-children {
+    > a:after {
+      @include caret(-2px);
+      border-color: $link_color;
+      transform: rotate(135deg);
+      transition: $transition_default;
+    }
+    &:hover > a:after {
+      transform: rotate(-45deg);
+      top: 0;
+      border-color: $link_hover_color;
+    }
+    > .sub-menu {
+      left: auto;
+      right: 0;
+    }
+  }
+}

assets/scss/elements/navigation/_nav-toggle.scss

@@ -0,0 +1,23 @@
+@mixin nav-toggle--laptop() {
+  .navbar-toggle {
+    display: none;
+  }
+}
+
+.icon-bar {
+  transition: 250ms;
+  position: relative;
+  display: block;
+  background: $theme_color;
+  border-radius: 2px;
+  width: 15px;
+  height: 2px;
+  &:nth-child(2) {
+    margin: 3px 0;
+  }
+}
+
+.navbar-toggle {
+  border: none;
+  background: none;
+}

assets/scss/main/_grid.scss

@@ -1,4 +1,3 @@
-
 /*!
  * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
@@ -13,22 +12,26 @@
   margin-right: auto;
   margin-left: auto;
 }
-@media (min-width: 576px) {
+
+@mixin grid-container--tablet-sm() {
   .container {
     max-width: 540px;
   }
 }
-@media (min-width: 768px) {
+
+@mixin grid-container--tablet() {
   .container {
     max-width: 720px;
   }
 }
-@media (min-width: 992px) {
+
+@mixin grid-container--laptop() {
   .container {
     max-width: 960px;
   }
 }
-@media (min-width: 1200px) {
+
+@mixin grid-container--desktop() {
   .container {
     max-width: 1140px;
   }
@@ -238,7 +241,7 @@
   margin-left: 91.6666666667%;
 }
 
-@media (min-width: 576px) {
+@mixin grid--tablet-sm() {
   .col-sm {
     flex-basis: 0;
     flex-grow: 1;
@@ -419,7 +422,8 @@
     margin-left: 91.6666666667%;
   }
 }
-@media (min-width: 768px) {
+
+@mixin grid--tablet() {
   .col-md {
     flex-basis: 0;
     flex-grow: 1;
@@ -600,7 +604,8 @@
     margin-left: 91.6666666667%;
   }
 }
-@media (min-width: 992px) {
+
+@mixin grid--laptop() {
   .col-lg {
     flex-basis: 0;
     flex-grow: 1;
@@ -781,7 +786,8 @@
     margin-left: 91.6666666667%;
   }
 }
-@media (min-width: 1200px) {
+
+@mixin grid--desktop() {
   .col-xl {
     flex-basis: 0;
     flex-grow: 1;

assets/scss/main/_media-queries.scss

@@ -0,0 +1,22 @@
+@media (min-width: #{$tablet-sm}) {
+  @include grid-container--tablet-sm();
+  @include grid--tablet-sm();
+}
+
+@media (min-width: #{$tablet}) {
+  @include grid-container--tablet();
+  @include grid--tablet();
+
+}
+
+@media (min-width: #{$laptop}) {
+  @include grid-container--laptop();
+  @include grid--laptop();
+  @include nav-toggle--laptop();
+  @include nav-menu--laptop();
+}
+
+@media (min-width: #{$desktop}) {
+@include grid-container--desktop();
+  @include grid--desktop();
+}