Mobile and Desktop Navbar created

src/_sass/_components/_navigation.scss

@@ -0,0 +1,27 @@
+@import '_helpers/variables';
+@import '_helpers/mixins';
+
+nav {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  &.navbar-default {
+    background-color: $white;
+    border-color: $white;
+  }
+
+  @include breakpoint(small) {
+    flex-flow: row nowrap;
+    justify-content: space-around;
+
+    &.navbar {
+      margin: 0;
+    }
+
+    .navbar-toggle {
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
+}

src/_sass/_helpers/_mixins.scss

@@ -0,0 +1,12 @@
+// **** Responsive Breakpoints **** //
+@mixin breakpoint($point) {
+  @if $point == large {
+    @media (max-width: 64.375em) { @content; }
+  }
+  @else if $point == medium {
+    @media (max-width: 50em) { @content; }
+  }
+  @else if $point == small {
+    @media (max-width: 37.5em)  { @content; }
+  }
+}

src/_sass/_helpers/_variables.scss

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700');
+
+// **** Fonts **** //
+$font-family: 'Josefin Sans', sans-serif;
+
+// **** Colours **** //
+$white: white;

src/_sass/background.scss

@@ -1,2 +1,14 @@
+@import '_helpers/variables';
+@import '_components/navigation';
+
 body {
+  font-family: $font-family;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-size: 700;
 }

webpack/components/Layout.jsx

@@ -13,14 +13,10 @@ export default class Layout extends React.Component {
   render() {
     return (
       <div className="page-wrap">
-        <Nav />
-
         <div className="container-fluid">
-          <div className="wrapper">
+          <Nav />
             { this.props.children }
-          </div>
         </div>
-
         <Footer />
       </div>
     );

webpack/components/Nav.jsx

@@ -13,12 +13,12 @@ export default class Nav extends React.Component {
     });
 
     return (
-      <nav className="navbar navbar-fixed-top">
+      <nav className="navbar navbar-default">
         <a className="navbar-brand" href="/#/home"> Draw My Life</a>
-        <button className="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
+        <button className="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
           &#9776;
         </button>
-        <div className="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+        <div className="collapse navbar-collapse" id="exCollapsingNavbar2">
         <ul className="nav navbar-nav pull-right">
             { _displayNavItem }
           </ul>