diff --git a/components/Navbar.vue b/components/Navbar.vue
index 29a4984..a8467da 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,20 +1,34 @@
 <template lang="html">
-  <nav>
-    <ul>
-      <li
-        v-for="item in items"
-        :key="item.name"
-      >
+  <div class="navigation">
+    <nav>
+      <div class="nav-mobile">
         <a
-          :href="item.url"
-          target="_blank"
-          rel="noreferrer"
+          id="nav-toggle"
+          href="#"
+          @click="toggleNav"
         >
-          <InlineSvg :src="`icons/${item.name.toLowerCase()}.svg`" /> {{ item.name }}
+          <span />
         </a>
-      </li>
-    </ul>
-  </nav>
+      </div>
+      <ul
+        ref="navList"
+        class="nav-list"
+      >
+        <li
+          v-for="item in items"
+          :key="item.name"
+        >
+          <a
+            :href="item.url"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <InlineSvg :src="`icons/${item.name.toLowerCase()}.svg`" /> {{ item.name }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </template>
 
 <script>
@@ -42,6 +56,13 @@ export default {
       ],
     };
   },
+  methods: {
+    toggleNav(event) {
+      event.preventDefault();
+      event.currentTarget.classList.toggle('active');
+      this.$refs.navList.classList.toggle('hide');
+    },
+  },
 };
 </script>
 
@@ -59,6 +80,105 @@ $desktop: (
   padding: 20px,
 );
 
+nav {
+  float: right;
+}
+
+.hide {
+  display: inline-block !important;
+  height: 100%;
+}
+
+.navigation {
+  background: $black;
+  height: map-get($mobile, height);
+}
+
+.nav-mobile {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $black;
+  height: map-get($mobile, height);
+  width: map-get($mobile, height);
+}
+
+@include mq($until: tablet, $media-type: screen) {
+  .nav-list {
+    display: block;
+  }
+}
+
+@include mq($until: tablet, $media-type: screen) {
+  nav {
+    width: 100%;
+    padding: map-get($mobile, height) 0 15px;
+  }
+
+  .nav-mobile {
+    display: block;
+  }
+
+  .nav-list {
+    width: 100%;
+    display: none;
+  }
+
+  .nav-list li {
+    width: 100%;
+    float: none;
+  }
+}
+
+#nav-toggle {
+  position: absolute;
+  left: 0;
+  top: 22px;
+  cursor: pointer;
+  padding: 10px 35px 16px 0;
+
+  span,
+  span::before,
+  span::after {
+    @include transition(all);
+
+    cursor: pointer;
+    border-radius: 1px;
+    height: 5px;
+    width: 35px;
+    background: $yellow;
+    position: absolute;
+    display: block;
+    content: ' ';
+  }
+
+  span::before {
+    top: -10px;
+  }
+
+  span::after {
+    bottom: -10px;
+  }
+
+  &.active span {
+    background-color: transparent;
+
+    &::before,
+    &::after {
+      top: 0;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
 ul {
   // Transition background and text
   @include transition(background-color, color);
@@ -79,6 +199,10 @@ ul {
     height: map-get($desktop, height);
   }
 
+  li {
+    float: left;
+  }
+
   li a {
     padding: 0 25px;
     display: flex;