diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index e510aeaaf..146333c5e 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-navbar type="is-secondary" wrapper-class="container">
+  <b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
     <template slot="brand">
       <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
         <logo />
@@ -26,7 +26,7 @@
     </template>
     <template slot="end">
       <b-navbar-item tag="div">
-        <search-field />
+        <search-field @navbar-search="mobileNavbarActive = false" />
       </b-navbar-item>
 
       <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
@@ -157,6 +157,8 @@ export default class NavBar extends Vue {
 
   RouteName = RouteName;
 
+  mobileNavbarActive: boolean = false;
+
   @Watch("currentActor")
   async initializeListOfIdentities() {
     if (!this.currentUser.isLoggedIn) return;
diff --git a/js/src/components/SearchField.vue b/js/src/components/SearchField.vue
index f0d498a5c..0b505c2a2 100644
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -24,6 +24,7 @@ export default class SearchField extends Vue {
   search: string = "";
 
   enter() {
+    this.$emit("navbar-search");
     this.$router.push({
       name: RouteName.SEARCH,
       query: { term: this.search },