diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html
index 4c4130a6..e0679dce 100644
--- a/lib/site_template/_includes/header.html
+++ b/lib/site_template/_includes/header.html
@@ -5,8 +5,11 @@
     <a class="site-title" href="/">{{ site.name }}</a>
 
     <nav class="site-nav">
-      <a class="page-link" href="/about">About</a>
-      <a class="page-link" href="/projects">Projects</a>
+      <span class="menu-icon">&#9776;</span>
+      <div class="trigger">
+        <a class="page-link" href="/about">About</a>
+        <a class="page-link" href="/projects">Projects</a>
+      </div>
     </nav>
 
   </div>
diff --git a/lib/site_template/css/main.css b/lib/site_template/css/main.css
index 0d0972f5..ff15cb39 100755
--- a/lib/site_template/css/main.css
+++ b/lib/site_template/css/main.css
@@ -64,7 +64,9 @@ a:visited { color: #205caa; }
   line-height: 56px;
 }
 
-.site-nav > a {
+.site-nav .menu-icon { display: none; }
+
+.site-nav .page-link {
   margin-left: 20px;
   color: #727272;
   letter-spacing: -.5px;
@@ -281,4 +283,53 @@ a:visited { color: #205caa; }
 .highlight .vc { color: #008080 } /* Name.Variable.Class */
 .highlight .vg { color: #008080 } /* Name.Variable.Global */
 .highlight .vi { color: #008080 } /* Name.Variable.Instance */
-.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
\ No newline at end of file
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+
+/* media queries */
+/* ----------------------------------------------------------*/
+
+@media screen and (max-width: 600px) {
+
+  .wrap { padding: 0 12px; }
+
+  .site-nav {
+    position: fixed;
+    z-index: 10;
+    top: 14px; right: 8px;
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid #e8e8e8;
+    cursor: pointer;
+  }
+
+  .site-nav .menu-icon {
+    display: block;
+    font-size: 24px;
+    color: #505050;
+    float: right;
+    width: 36px;
+    text-align: center;
+    line-height: 36px;
+  }
+
+  .site-nav .trigger {
+    clear: both;
+    margin-bottom: 5px;
+    display: none;
+  }
+
+  .site-nav:hover .trigger,
+  .site-nav:active .trigger {
+    display: block;
+  }
+
+  .site-nav .page-link {
+    display: block;
+    text-align: right;
+    line-height: 1.25;
+    padding: 5px 10px;
+    margin: 0;
+  }
+
+}
\ No newline at end of file