Searchbar Fix

src/app/catagory/catagory.page.html

 <ion-header>
     <div class="nav_header">
-        <ion-grid class="no-gutter">
-            <ion-row class="no-gutter">
-                <ion-col class="no-gutter" size="2">
-                    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
-                        <img src="../assets/Group22_2.png">
-                    </button>
-                </ion-col>
-                <ion-col class="no-gutter" size="8">
-                    <div class="nav_title floatLeft">
-                        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="goToSearch('searchmodal')">
-                    </div>
-                </ion-col>
-                <ion-col class="no-gutter" size="2">
-                    <button class="nav_btn nav_search floatRight">
-                    </button>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+        <div class="custom-header">
+            <div class="menu-sctn">
+                <ion-menu-toggle>
+                    <button class="nav_btn nav_menu floatLeft"></button>
+                </ion-menu-toggle>
+            </div>
+            <div class="mid-sctn">
+                <div class="nav_title floatLeft relative">
+                    <!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
+
+                    <h1 class="search_bar" (click)="goToPage('searchmodal')">Search here.. eg:shirts, retailers etc...
+                    </h1>
+                </div>
+            </div>
+            <div class="search-sctn">
+                <button class="nav_btn nav_search floatRight" *ngIf="!searchShow"
+                    (click)="goToPage('searchmodal')"></button>
+            </div>
+        </div>
     </div>
 </ion-header>
 
@@ -28,8 +29,10 @@
         </div>
         <div class="featured_catagory_list">
             <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
-                <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
-                    <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'">
+                <li *ngFor="let categories of categoriesService.activecategories"
+                    (click)="goToPage('catstorelist', categories)">
+                    <img [src]="categories.catImage"
+                        onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'">
                     <div class="featured_overlay">
                         <h4>{{categories.catName}}</h4>
                     </div>

src/app/catagory/catagory.page.scss

@@ -345,3 +345,30 @@
     }
   }
 }
+
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  .menu-sctn {
+      width: 15%;
+  }
+  .mid-sctn {
+      width: 70%;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      margin-top: 2px;
+  }
+  .search-sctn {
+      width: 15%;
+  }
+  h1 {
+      font-size: 16px;
+      margin: 0 10px;
+      text-align: left;
+      overflow: hidden;
+      white-space: nowrap;
+      color: #6d6d6d;
+  }
+
+}
\ No newline at end of file