searchmodal fixes

src/app/home/home.page.html

 <ion-header>
     <div class="nav_header" *ngIf="!isShow">
-        <ion-grid class="no-gutter">
-            <ion-row class="no-gutter">
-                <ion-col class="no-gutter" size="2">
-                    <ion-menu-toggle>
-                        <button class="nav_btn nav_menu floatLeft"></button>
-                    </ion-menu-toggle>
-                </ion-col>
-                <ion-col class="no-gutter" size="8">
-                    <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> -->
 
-                        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="goToPage('searchmodal')" />
-                    </div>
-                </ion-col>
-                <ion-col class="no-gutter" size="2">
-                    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="goToPage('searchmodal')"></button>
-                    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></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> -->
+
+                    <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="goToPage('searchmodal')" />
+                </div>
+            </div>
+            <div class="search-sctn">
+                <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="goToPage('searchmodal')"></button>
+                <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
+            </div>
+        </div>
     </div>
 </ion-header>
 

src/app/home/home.page.scss

@@ -336,4 +336,18 @@
     li {
         list-style: none;
     }
+}
+
+.custom-header {
+    display: flex;
+    justify-content: space-between;
+    .menu-sctn {
+        width: 15%;
+    }
+    .mid-sctn {
+        width: 70%;
+    }
+    .search-sctn {
+        width: 15%;
+    }
 }
\ No newline at end of file

src/app/searchmodal/searchmodal.page.html

 <div class="custom-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)="closeModal()"></button>
-            </ion-col>
-            <ion-col class="no-gutter" size="8">
-                <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 />
-                </div>
-            </ion-col>
-            <ion-col class="no-gutter" size="2">
-                <button class="nav_btn nav_close floatRight" (click)="closeModal()"></button>
-            </ion-col>
-        </ion-row>
-    </ion-grid>
+    <div class="back-sctn">
+        <button class="nav_btn nav_back floatLeft" (click)="closeModal()"></button>
+    </div>
+    <div class="search-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 />
+        </div>
+    </div>
+    <div class="close-sctn">
+        <button class="nav_btn nav_close floatRight" (click)="closeModal()"></button>
+    </div>
 </div>
 
 <div class="search_item_list">

src/app/searchmodal/searchmodal.page.scss

@@ -8,4 +8,15 @@
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: space-between;
+    .back-sctn {
+        width: 15%;
+    }
+    .search-sctn {
+        width: 70%;
+    }
+    .close-sctn {
+        width: 15%;
+    }
 }
\ No newline at end of file

src/global.scss

@@ -625,6 +625,7 @@ ion-header {
     top: 50px;
     bottom: 0px;
     z-index: 99;
+    overflow: scroll;
     ul {
         margin: 0px;
         padding: 0px;