Try to add responsive design?

_includes/header.html

@@ -1,9 +1,11 @@
 <header>
     <div id = "title"> 
-        <a href="/"><b>Andrew Cassidy</b></a>
-        <span class="slash">/</span>
-        <a href="/Projects">Projects</a>
-        <span class="slash">/</span>
-        FooBar
+        <a href="/" id="name"><b>Andrew Cassidy</b></a>
+        <span id="path">
+            <span class="slash">/</span>
+            <a href="/Projects">Projects</a>
+            <span class="slash">/</span>
+            FooBar
+        </span>
     </div>
 </header>

_includes/sidebar.html

@@ -1,4 +1,10 @@
+<input id="sidebarToggle" type="checkbox"/>
+<span id="sidebarToggleImage">
+    <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
+</span>
+
 <nav id="sidebar">
+
     <ul id="navFlags">
         <li>{% include flag.html color="blue" name="Home" url="/" %}</li>
         <li>{% include flag.html color="green" name="Blog" url="/Blog" %}</li>

_sass/_util.scss

@@ -40,4 +40,6 @@
         // Output standard non-prefixed declaration
         #{$property}: $value;
     }
-}
+}
+
+$mobile-width: 500px;

css/sidebar.scss

@@ -19,6 +19,44 @@ $animate-time: 0.03s;
     }
 }
 
+#sidebarToggle {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+ 
+
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+        margin: 0;
+        z-index: 2;
+
+        cursor: pointer;
+        opacity: 0;
+    }
+}
+
+#sidebarToggleImage {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+
+        text-align: center;
+        color: $title-text;
+
+        top: 7px;
+        left: 0;
+        width: 30px;
+        z-index: 1;
+
+        cursor: pointer;
+        //opacity: 0;
+    }
+}
+
 #navFlags {
     display: block;
     margin-block-start: 0;
@@ -32,6 +70,27 @@ $animate-time: 0.03s;
     }
 }
 
+@media screen and (max-width: $mobile-width){
+    #sidebar{
+        position: fixed;
+        left: -180px;
+        background-color: #FFE;
+        width: 145px;
+        height: 100%;
+
+        padding-top: 40px;
+
+    }
+
+    #sidebarToggle:checked ~ #sidebar{
+        left: 0px;
+    }
+
+    #navLinks a:hover {
+        color: $sidebar-text;
+    }
+}
+
 #navLinks {
     padding: {
         left: 10px;

css/style.scss

@@ -57,7 +57,6 @@
 }
 
 
-
 body {
     margin: 0;
     background-color: $margin;
@@ -72,40 +71,71 @@ body {
     margin-right: auto;
     margin-top: 0;
     height: 100%;
-            box-shadow: 0 0 4px 5px $shadow;
-       -moz-box-shadow: 0 0 4px 5px $shadow;
-    -webkit-box-shadow: 0 0 4px 5px $shadow;
+
+
+    @media screen and (min-width: $mobile-width){
+        box-shadow: 0 0 4px 5px $shadow;
+        -moz-box-shadow: 0 0 4px 5px $shadow;
+     -webkit-box-shadow: 0 0 4px 5px $shadow;
+    }
 }
 
 // HEADER
+header {
 
-#title {
-    margin:0;
-    padding: 10px;
-    font-family: $title-font;
-    color: $title-text;
-    font-weight: normal;
-    font-size: 28px;
-
-    a {
-        color: inherit;
-        text-decoration: none;
-    }
+    @media screen and (max-width: $mobile-width){
+        top: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
 
-    a:hover {
-        color: inherit;
-        text-decoration: underline;
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+            left: 30px;
+        }
+           
+        line-height: 10px;
     }
-}
 
-.slash {
-    display: inline-block;
-    vertical-align: -10%;
-    font: {
-        size: 36px;
+    #title {
+        margin:0;
+        padding: 10px;
+        font-family: $title-font;
+        color: $title-text;
+        font-weight: normal;
+        font-size: 28px;
+
+        @media screen and (max-width: $mobile-width){
+            font-size: 16px;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+
+        .slash {
+            display: inline-block;
+            vertical-align: -10%;
+            font: {
+                size: 36px;
+            }
+
+            @media screen and (max-width: $mobile-width){
+                font-size: 20px;
+            }
+        }
     }
-}
 
+}
 #main {
     display: flex;
 }