Cleaned more code, still untested.

public/components/nav/menu/HamburgerMenu.scss

@@ -10,7 +10,7 @@
  *  Version:
  *    1.1.0 - 2018/10/23
  */
-@import '@styles/global';
+@import '~@styles/global';
 
 $c-hamburger-menu--max: 200%;
 $c-hamburger-menu--pos-x: 100%;
@@ -65,11 +65,11 @@ $c-hamburger-menu--pos-y: 0%;
     }
 
     &--home {
-      background-image: url('@assets/images/patterns/game-show.svg');
+      background-image: url('~@assets/images/patterns/game-show.svg');
     }
 
     &--contact {
-      background-image: url('@assets/images/patterns/lemon-triangle.svg');
+      background-image: url('~@assets/images/patterns/lemon-triangle.svg');
     }
 
     &:hover:before {

public/components/nav/navbar/Navbar.jsx

@@ -25,9 +25,14 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom'
-import PageBoundary from '@components/page/PageBoundary';
+
+import Styles from './Navbar.scss';
+
 import Language from '@public/language/Language';
+
+import { PageBoundary } from '@components/page/Page';
 import HamburgerMenu from './../menu/HamburgerMenu';
+
 import Image from '@objects/image/Image';
 
 const NavbarLink = function(props) {

public/components/nav/navbar/Navbar.scss

@@ -0,0 +1,117 @@
+/*
+ *  Navbar
+ *    Navigation bar at the top of the screen.
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/typography.scss
+ *    styles/settings/z.scss
+ *    styles/tools/flex.scss
+ *    styles/tool/list.scss
+ *
+ *  Version:
+ *    1.1.0 - 2018/08/14
+ */
+@import '~@styles/global';
+
+$c-navbar--link-thickness: 5px;
+
+.c-navbar {
+  z-index: $s-z--navbar;
+
+  &.is-stuck {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+
+  &__nav {
+    display: flex;
+    align-items: stretch;
+    @extend %t-dp--shadow;
+    background: $s-color--navbar;
+    color: white;
+  }
+
+  //Logo
+  &__logo-container {
+    width: 100%;
+    padding: 0.5em;
+  }
+
+  &__logo {
+    //To Allow the logo to go over the top of the menu!~
+    position: relative;
+    z-index: $s-z--logo;
+    width: 7em;
+  }
+
+  //Links
+  &__link {
+    align-items: center;
+    @extend %s-font--style-button;
+    display: none;
+    position: relative;
+    padding: 1em;
+    color: $s-color--navbar__text;
+
+    &:after {
+      @extend %t-dp--shadow;
+      position: absolute;
+      width: 100%;
+      height: 0px;
+      left: 0;
+      bottom: 0px;
+      transform: translateY(100%);
+      transition: height 0.2s $s-animation--ease-out;
+
+      content: "";
+    }
+
+    &.is-active:after {
+      background: $s-color--navbar__bar-hover;
+      height: $c-navbar--link-thickness;
+    }
+
+    &:hover {
+      color: $s-color--navbar__text-hover;
+
+      &:after {
+        background: $s-color--navbar__bar-hover;
+        height: $c-navbar--link-thickness;
+      }
+    }
+  }
+
+  &__hamburger {
+  }
+
+  @include t-media-query($s-xsmall-up) {
+    &__hamburger {
+      display: none;
+    }
+
+    &__logo {
+      width: 10em;
+    }
+
+    &__link {
+      display: flex;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+
+    &__logo {
+      width: 12em;
+    }
+  }
+
+  @include t-media-query($s-medium-up) {
+    &.is-stuck {
+      top: 5%;
+    }
+  }
+}