diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9396259..9a98e7e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -63,8 +63,19 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
+@import "@/style/_variables.scss";
 .nav-title {
   font-weight: bold;
 }
+@media screen and (max-width: $navbar-breakpoint) {
+  .navbar {
+    position: relative
+  }
+  .navbar-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+}
 </style>
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 9c6c4ce..6202670 100644
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -2,4 +2,6 @@ $primary: #2ecc71;
 $tabs-link-active-color: #3498db;
 $tabs-link-active-border-bottom-color: #3498db;	
 $family-sans-serif: 'Fira Sans', sans-serif;
+$gap: 32px !default;
+$navbar-breakpoint: 960px + (2 * $gap);
 @import "~bulma/sass/utilities/_all.sass";
\ No newline at end of file