fix #79 Bug: Top menu is not shown properly

using "display: flex" to .navbar-header

resource/css/_layout.scss

@@ -13,9 +13,15 @@
       border-radius: 0;
       border: none;
       margin-bottom: 0;
+      display: flex;
 
       box-shadow: 0 3px 10px 0px rgba(0,0,0,.3);
 
+      .navbar-header {
+        flex-grow: 1;
+        display: flex;
+      }
+
       .navbar-brand {
         font-weight: bold;
         img {
@@ -53,7 +59,7 @@
       }
 
       .navbar-toggle {
-        position: absolute;
+        margin-left: 15px;
         top: 0;
         right: 0;
       }

resource/css/_search.scss

@@ -26,12 +26,43 @@
 }
 
 .search-top {
+  flex-grow: 1;
+  display: flex;
+
+  %flexgrow {
+    flex-grow: 1;
+    display: flex;
+  }
+
+  // set flex-grow
+  .search-box {
+    @extend %flexgrow;
+    .form-group {
+      @extend %flexgrow;
+    }
+    .input-group {
+      @extend %flexgrow;
+    }
+  }
+
   .search-top-input-group {
 
     // using react-bootstrap-typeahead
     // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .bootstrap-typeahead-input input {
-      width: 400px;
+    .bootstrap-typeahead {
+      @extend %flexgrow;
+      max-width: 480px;
+
+      .bootstrap-typeahead-input {
+        @extend %flexgrow;
+        input {
+          @extend %flexgrow;
+        }
+      }
+
+    }
+    .input-group-btn {
+      flex-basis: 39px;
     }
 
     .search-top-clear {
@@ -128,24 +159,11 @@
 // Smartphone and Tablet
 @media (max-width: $screen-sm-max) {
   .search-top {
-    margin-top: 4px 0 0 0;
     padding: 0;
+    margin-right: 0;
     border-style: none !important;
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
-
-    .search-form {
-      width: 76%;
-    }
-
-    .search-top-input-group {
-      .search-top-input {
-        width: 100%;
-      }
-      .btn {
-        z-index: 10;
-      }
-    }
   }
 
   .search-result {
@@ -166,12 +184,10 @@
 // Smartphone
 @media (max-width: $screen-xs-max) {
   .search-top {
-    .search-form {
-      min-width: 40%;
-      max-width: 50%;
-      width: 50%;
-    }
-    .search-box {
+    .search-top-input-group {
+      .btn {
+        z-index: 10;
+      }
     }
   }
 }