diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index a720c05..32c865e 100644
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -3,10 +3,19 @@ window.Vue = require('vue');
 Vue.component('file-info-modal', require('./components/file-info-modal.vue').default);
 
 const app = new Vue({
-    el: '#app',
+    el: "#app",
+    data: function () {
+        return { menuOpen: false };
+    },
+    computed: {
+        menuStyles() { return { 'hidden': ! this.menuOpen } }
+    },
     methods: {
         showFileInfo(filePath) {
             this.$refs.fileInfoModal.show(filePath);
+        },
+        toggleMenuVisibility() {
+            this.menuOpen = ! this.menuOpen;
         }
     },
     mounted: function() {
diff --git a/app/views/components/header.twig b/app/views/components/header.twig
index e08a3ab..8fba1f2 100644
--- a/app/views/components/header.twig
+++ b/app/views/components/header.twig
@@ -1,6 +1,6 @@
 <header id="header" class="bg-blue-600 shadow sticky top-0">
-    <div class="container flex flex-col flex-coljustify-between items-center mx-auto p-4 md:flex-row">
-        <div class="flex-grow font-mono text-white text-sm tracking-tight mb-2 md:my-1">
+    <div class="container flex justify-between flex-wrap items-center mx-auto p-4 md:flex-row">
+        <div class="flex-1 font-mono text-white text-sm tracking-tight my-1">
             <a href="." class="inline-block hover:underline">
                 {{ translate('home') }}
             </a>
@@ -12,14 +12,25 @@
             {% endif %}
         </div>
 
-        <div class="flex justify-end items-center">
+        <button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="toggleMenuVisibility">
+            <div v-if="menuOpen">
+                <i class="fas fa-times fa-lg fa-fw"></i>
+            </div>
+            <div v-else>
+                <i class="fas fa-ellipsis-v fa-lg fa-fw"></i>
+            </div>
+        </button>
+
+        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="menuStyles">
             {% if path and files is not empty and config('zip_downloads') %}
-                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white mx-2 p-1 hover:text-gray-400">
+                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-400">
                     <i class="fas fa-download fa-lg"></i>
                 </a>
             {% endif %}
 
-            {% include 'components/search.twig' %}
+            <div class="flex-1">
+                {% include 'components/search.twig' %}
+            </div>
         </div>
     </div>
 </header>
diff --git a/app/views/components/search.twig b/app/views/components/search.twig
index 6e2f31e..136d4bc 100644
--- a/app/views/components/search.twig
+++ b/app/views/components/search.twig
@@ -1,4 +1,4 @@
-<form id="search" action="." method="get" class="flex-grow group relative block bg-blue-700 rounded-full shadow-inner">
+<form id="search" action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner">
     <input type="text" value="{{ search }}" name="search" placeholder="{{ translate('search') }}..."
         class="bg-transparent placeholder-gray-900 text-white w-full px-10 py-2"
         ref="searchInput" v-on:focus="$event.target.select()"