Modify the style of search bar

themes/navy/layout/partial/header.swig

@@ -6,10 +6,13 @@
     <nav id="main-nav">
       {{ header_menu('main-nav') }}
       <a href="https://github.com/{{ config.github }}" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
+      <div id="search-input-wrap">
+        <div id="search-input-icon">
+          <i class="fa fa-search"></i>
+        </div>
+        <input type="search" id="search-input" placeholder="Search...">
+      </div>
     </nav>
-    <div id="search-input-wrap">
-      <input type="search" id="search-input" placeholder="Search...">
-    </div>
     <div id="lang-select-wrap">
       <label id="lang-select-label"><i class="fa fa-globe"></i><span>{{ lang_name(page.lang) }}</span></label>
       <select id="lang-select" data-canonical="{{ canonical_path_for_nav() }}">

themes/navy/source/css/_partial/header.styl

@@ -40,30 +40,30 @@ logo-size = 50px
   opacity: 0.7
   transition: 0.2s
   font-family: font-title
-  text-transform: uppercase
   display: inline-block
-  padding: 0 20px
+  padding: 0 15px
   &:hover
     opacity: 1
     color: color-link-hover
 
 #search-input-wrap
-  display: none
-  margin-right: 15px
-  @media mq-normal
-    display: block
+  display: inline-block
+  padding-left: 6px
+  padding-bottom: 8px
+  border-bottom: 1px solid color-gray
+
+#search-input-icon
+  color: #fff
+  padding-right: 0.5em
+  display: inline-block
+  opacity: 0.7
 
 #search-input
   background: none
-  border-bottom: 1px solid color-gray
   font-size: inherit
   font-family: font-title
-  padding: 0.5em 0
   color: #fff
   outline: none
-  transition: border-color 0.2s
-  &:focus
-    border-bottom-color: color-link-hover
 
 #lang-select-wrap
   display: none

themes/navy/source/css/_variables.styl

@@ -27,4 +27,4 @@ mobile-nav-width = 260px
 // Media queries
 mq-mobile = "screen and (max-width: 768px)"
 mq-normal = "screen and (min-width: 769px)"
-mq-tablet = "screen and (min-width: 480px)"
+mq-tablet = "screen and (min-width: 480px)"