fix(nav-header): style tweaks

Author: luiskcs89

src/components/app-nav-header/app-nav-header.scss

@@ -21,6 +21,10 @@ button.navbar-toggler {
   }
 }
 
+.navbar-light .navbar-toggler {
+  border-color: transparent !important;
+}
+
 nav.navbar .navbar-nav .nav-item {
   text-align: left;
 
@@ -63,6 +67,9 @@ nav.navbar .navbar-nav .nav-item {
     align-items: center;
     margin-left: 1.5rem;
     font-size: 24px;
+    position: absolute;
+    right: 20px;
+    top: 14px;
   }
 
   &.search-bar {
@@ -88,6 +95,8 @@ nav.navbar .navbar-nav .nav-item {
 nav.navbar .navbar-nav .nav-link {
   color: #121212;
   font-weight: 300;
+  padding-top: 0;
+  padding-bottom: 0;
 
   &.dropdown-item {
     background: white;
@@ -111,7 +120,7 @@ nav.navbar .navbar-nav .nav-link {
       margin-left: 0;
       margin-right: 0;
       margin-top: 0.5rem;
-      margin-bottom: 0.5rem;
+      margin-bottom: 1.5rem;
     }
   }
 }

src/components/app-nav-header/app-nav-header.tsx

@@ -92,12 +92,12 @@ export class AppNavHeader {
                 </stencil-route-link>
               </li>
               <li class="nav-item search d-none d-lg-block" data-target="#navbarSupportedContent">
-                <i class="fas fa-search" />
+                <i class="fa fa-search" />
               </li>
               <li class="nav-item search-bar d-md-block d-lg-none" data-target="#navbarSupportedContent">
                 <input type="text" placeholder="Type to search content..." class="search-input" />
                 <div class="search-icon">
-                  <i class="fas fa-search" />
+                  <i class="fa fa-search" />
                 </div>
               </li>
             </ul>