diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index f631f10..517f47d 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,8 +1,8 @@
 <div class="sidebar">
-  <div class="sidebar--logo">
+  <div class="sidebar__logo">
     <a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
   </div>
-  <nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
+  <nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
 
     {% for section in sections %}
     <h3 class="section__header">{{ section | capitalize }}</h3>
diff --git a/_layouts/default.html b/_layouts/default.html
index 463ea39..a986465 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,17 +13,23 @@
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   </head>
 
   <body>
     {% include sidebar.html %}
 
+    <div class="content__overlay"></div>
     <div class="content__area">
       <div class="content">
+        <button class="menu-button">
+          <i class="icon fa fa-2x fa-bars" aria-hidden="true"></i>
+          <span>Menu</span>
+        </button>
         <h1>{{ page.title }}</h1>
         {{ content }}
       </div>
     </div>
-
   </body>
+  <script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
 </html>
diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss
index cf22944..36d4aa5 100644
--- a/_sass/modules/_buttons.scss
+++ b/_sass/modules/_buttons.scss
@@ -32,3 +32,20 @@
   vertical-align: middle;
   margin-right: $spacing-unit / 4;
 }
+
+
+/*============================================================================
+  Menu button
+ ==============================================================================*/
+.menu-button {
+  display: inline-block;
+  background: none;
+  border: none;
+  margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
+  padding: $spacing-unit / 4;
+  color: $color-slate;
+
+  @include tablet-and-up {
+    display: none;
+  }
+}
diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss
index 2fe6586..ba231c3 100644
--- a/_sass/modules/_layout.scss
+++ b/_sass/modules/_layout.scss
@@ -3,13 +3,39 @@ $sidebar-width: 250px;
 $logo-height: 130px;
 $wrapper-width: 800px;
 
+body {
+  // display: flex;
+  // flex-direction: column;
+
+  // @include tablet-and-up {
+  //   flex-direction: row;
+  // }
+}
+
+
 /*============================================================================
   Content Area
  ==============================================================================*/
 
 .content__area {
-  padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
   width: 100%;
+
+  @include tablet-and-up {
+    padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
+  }
+}
+
+.content__overlay {
+  background: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+  display: none;
+}
+
+.content__overlay--is-active {
+  display: block;
 }
 
 .content {
@@ -26,11 +52,22 @@ $wrapper-width: 800px;
 .sidebar {
   background: $color-blue-5;
   width: $sidebar-width;
-  height: 100vh;
   position: fixed;
+  transform: translateX($sidebar-width * -1);
+  transition: all 0.15s ease;
+  z-index: 2;
+  height: 100vh;
+
+  @include tablet-and-up {
+    transform: translateX(0);
+  }
 }
 
-.sidebar--logo {
+.sidebar--is-visible {
+  transform: translateX(0);
+}
+
+.sidebar__logo {
   font-size: $base-font-size * 2;
   font-weight: bold;
   text-align: center;
@@ -49,7 +86,7 @@ $wrapper-width: 800px;
   }
 }
 
-.sidebar--nav {
+.sidebar__nav {
   padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
   font-weight: bold;
   max-height: 100%;
diff --git a/_sass/partials/_helpers.scss b/_sass/partials/_helpers.scss
index 51fd2ff..22650bc 100644
--- a/_sass/partials/_helpers.scss
+++ b/_sass/partials/_helpers.scss
@@ -5,3 +5,12 @@
     clear: both;
    }
 }
+
+.visually-hidden {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}
diff --git a/_sass/partials/_media-queries.scss b/_sass/partials/_media-queries.scss
new file mode 100644
index 0000000..bec2f0e
--- /dev/null
+++ b/_sass/partials/_media-queries.scss
@@ -0,0 +1,43 @@
+/*============================================================================
+  Media queries
+==============================================================================*/
+
+$phone-width: 321px;
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin phone {
+  @media (max-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-and-up {
+  @media (min-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-to-tablet {
+  @media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet-and-up {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
diff --git a/css/main.scss b/css/main.scss
index 6034afd..f31263b 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,6 +1,5 @@
 ---
 layout: null
-# hello tets
 ---
 
 @charset "utf-8";
@@ -8,6 +7,7 @@ layout: null
 @import "partials/defaults";
 @import "partials/colors";
 @import "partials/helpers";
+@import "partials/media-queries";
 
 @import "modules/base";
 @import "modules/layout";
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..854b2ad
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,12 @@
+$menuButton = $(".menu-button");
+$sidebar = $(".sidebar");
+$contentOverlay = $(".content__overlay");
+
+
+$(document).ready(function() {
+
+  $menuButton.add($contentOverlay).on("click", function() {
+    $sidebar.toggleClass("sidebar--is-visible");
+    $contentOverlay.toggleClass("content__overlay--is-active");
+  });
+})
