Try to add responsive design?

_includes/header.html

@@ -1,9 +1,11 @@
 <header>
     <div id = "title"> 
-        <a href="/"><b>Andrew Cassidy</b></a>
+        <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

@@ -41,3 +41,5 @@
         #{$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,14 +71,35 @@ body {
     margin-right: auto;
     margin-top: 0;
     height: 100%;
+
+
+    @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 {
+    @media screen and (max-width: $mobile-width){
+        top: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
+
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+            left: 30px;
+        }
+           
+        line-height: 10px;
+    }
+
+    #title {
         margin:0;
         padding: 10px;
         font-family: $title-font;
@@ -87,6 +107,10 @@ body {
         font-weight: normal;
         font-size: 28px;
 
+        @media screen and (max-width: $mobile-width){
+            font-size: 16px;
+        }
+
         a {
             color: inherit;
             text-decoration: none;
@@ -96,16 +120,22 @@ body {
             color: inherit;
             text-decoration: underline;
         }
-}
 
-.slash {
+
+        .slash {
             display: inline-block;
             vertical-align: -10%;
             font: {
                 size: 36px;
             }
-}
 
+            @media screen and (max-width: $mobile-width){
+                font-size: 20px;
+            }
+        }
+    }
+
+}
 #main {
     display: flex;
 }