diff --git a/webapp/components/SearchInput.vue b/webapp/components/SearchInput.vue
index be31239bd..098b30610 100644
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@@ -10,9 +10,7 @@
   >
     <div class="field">
       <div class="control">
-        <a v-if="isActive" class="search-clear-btn" @click="clear">
-          &nbsp;
-        </a>
+        <a v-if="isActive" class="search-clear-btn" @click="clear">&nbsp;</a>
         <ds-select
           :id="id"
           ref="input"
@@ -41,9 +39,7 @@
           <template slot="option" slot-scope="{ option }">
             <ds-flex>
               <ds-flex-item class="search-option-label">
-                <ds-text>
-                  {{ option.label | truncate(70) }}
-                </ds-text>
+                <ds-text>{{ option.label | truncate(70) }}</ds-text>
               </ds-flex-item>
               <ds-flex-item class="search-option-meta" width="280px">
                 <ds-flex>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 162bae0fb..e3fc1cccd 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,88 +1,98 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container class="main-navigation-container">
-        <div class="main-navigation-left">
-          <a v-router-link style="display: inline-flex" href="/">
-            <ds-logo />
-          </a>
-        </div>
-        <div class="main-navigation-center hc-navbar-search">
-          <search-input
-            id="nav-search"
-            :delay="300"
-            :pending="quickSearchPending"
-            :results="quickSearchResults"
-            @clear="quickSearchClear"
-            @search="value => quickSearch({ value })"
-            @select="goToPost"
-          />
-        </div>
-        <div class="main-navigation-right">
-          <no-ssr>
-            <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
-          </no-ssr>
-          <template v-if="isLoggedIn">
-            <no-ssr>
-              <notification-menu />
-            </no-ssr>
-            <no-ssr>
-              <dropdown class="avatar-menu">
-                <template slot="default" slot-scope="{ toggleMenu }">
-                  <a
-                    class="avatar-menu-trigger"
-                    :href="
-                      $router.resolve({
-                        name: 'profile-id-slug',
-                        params: { id: user.id, slug: user.slug },
-                      }).href
-                    "
-                    @click.prevent="toggleMenu"
-                  >
-                    <hc-avatar :user="user" />
-                    <ds-icon size="xx-small" name="angle-down" />
-                  </a>
+      <ds-container class="main-navigation-container" style="padding: 10px 10px;">
+        <div>
+          <ds-flex>
+            <ds-flex-item :width="{ base: '49px', md: '150px' }">
+              <a v-router-link style="display: inline-flex" href="/">
+                <ds-logo />
+              </a>
+            </ds-flex-item>
+            <ds-flex-item>
+              <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
+                <search-input
+                  id="nav-search"
+                  :delay="300"
+                  :pending="quickSearchPending"
+                  :results="quickSearchResults"
+                  @clear="quickSearchClear"
+                  @search="value => quickSearch({ value })"
+                  @select="goToPost"
+                />
+              </div>
+            </ds-flex-item>
+            <ds-flex-item width="200px" style="background-color:white">
+              <div class="main-navigation-right" style="float:right">
+                <no-ssr>
+                  <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
+                </no-ssr>
+                <template v-if="isLoggedIn">
+                  <no-ssr>
+                    <notification-menu />
+                  </no-ssr>
+                  <no-ssr>
+                    <dropdown class="avatar-menu">
+                      <template slot="default" slot-scope="{ toggleMenu }">
+                        <a
+                          class="avatar-menu-trigger"
+                          :href="
+                            $router.resolve({
+                              name: 'profile-id-slug',
+                              params: { id: user.id, slug: user.slug },
+                            }).href
+                          "
+                          @click.prevent="toggleMenu"
+                        >
+                          <hc-avatar :user="user" />
+                          <ds-icon size="xx-small" name="angle-down" />
+                        </a>
+                      </template>
+                      <template slot="popover" slot-scope="{ closeMenu }">
+                        <div class="avatar-menu-popover">
+                          {{ $t('login.hello') }}
+                          <b>{{ userName }}</b>
+                          <template v-if="user.role !== 'user'">
+                            <ds-text color="softer" size="small" style="margin-bottom: 0">
+                              {{ user.role | camelCase }}
+                            </ds-text>
+                          </template>
+                          <hr />
+                          <ds-menu :routes="routes" :matcher="matcher">
+                            <ds-menu-item
+                              slot="menuitem"
+                              slot-scope="item"
+                              :route="item.route"
+                              :parents="item.parents"
+                              @click.native="closeMenu(false)"
+                            >
+                              <ds-icon :name="item.route.icon" />
+                              {{ item.route.name }}
+                            </ds-menu-item>
+                          </ds-menu>
+                          <hr />
+                          <nuxt-link class="logout-link" :to="{ name: 'logout' }">
+                            <ds-icon name="sign-out" />
+                            {{ $t('login.logout') }}
+                          </nuxt-link>
+                        </div>
+                      </template>
+                    </dropdown>
+                  </no-ssr>
                 </template>
-                <template slot="popover" slot-scope="{ closeMenu }">
-                  <div class="avatar-menu-popover">
-                    {{ $t('login.hello') }}
-                    <b>{{ userName }}</b>
-                    <template v-if="user.role !== 'user'">
-                      <ds-text color="softer" size="small" style="margin-bottom: 0">
-                        {{ user.role | camelCase }}
-                      </ds-text>
-                    </template>
-                    <hr />
-                    <ds-menu :routes="routes" :matcher="matcher">
-                      <ds-menu-item
-                        slot="menuitem"
-                        slot-scope="item"
-                        :route="item.route"
-                        :parents="item.parents"
-                        @click.native="closeMenu(false)"
-                      >
-                        <ds-icon :name="item.route.icon" />
-                        {{ item.route.name }}
-                      </ds-menu-item>
-                    </ds-menu>
-                    <hr />
-                    <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-                      <ds-icon name="sign-out" />
-                      {{ $t('login.logout') }}
-                    </nuxt-link>
-                  </div>
-                </template>
-              </dropdown>
-            </no-ssr>
-          </template>
+              </div>
+            </ds-flex-item>
+          </ds-flex>
         </div>
       </ds-container>
     </div>
+
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
         <nuxt />
       </div>
     </ds-container>
+
     <div id="overlay" />
     <no-ssr>
       <modal />
@@ -181,9 +191,23 @@ export default {
       }
       return this.$route.path.indexOf(url) === 0
     },
+    unfolded: function() {
+      document.getElementById('nav-search-box').classList.add('unfolded')
+    },
+    foldedup: function() {
+      document.getElementById('nav-search-box').classList.remove('unfolded')
+    },
   },
 }
 </script>
+<style>
+.unfolded {
+  position: absolute;
+  right: 0px;
+  left: 0px;
+  z-index: 1;
+}
+</style>
 
 <style lang="scss">
 .topbar-locale-switch {
@@ -199,28 +223,6 @@ export default {
   }
 }
 
-.main-navigation-container {
-  padding: $space-x-small $space-large !important;
-  width: 100%;
-  align-items: center;
-  display: flex;
-}
-
-.main-navigation-left {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  align-items: center;
-}
-
-.main-navigation-center {
-  display: flex;
-  flex: auto;
-  width: 100%;
-  padding-right: $space-large;
-  padding-left: $space-large;
-}
-
 .main-navigation-right {
   display: flex;
   flex: 1;