diff --git a/templates/navigation.hbs b/templates/navigation.hbs
index 62951763b..bf68eb15d 100644
--- a/templates/navigation.hbs
+++ b/templates/navigation.hbs
@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate &#x1F50D;"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div class="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
           <a href="/" class="pure-menu-heading pure-menu-link" aria-label="Docs.rs"><i class="fa fa-cubes fa-fw"></i> Docs.rs</a>
           <ul class="pure-menu-list">
diff --git a/templates/navigation_rustdoc.hbs b/templates/navigation_rustdoc.hbs
index 379f82df7..262f041c2 100644
--- a/templates/navigation_rustdoc.hbs
+++ b/templates/navigation_rustdoc.hbs
@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" aria-label="Find crate by search query" tabindex="-1" type="text" placeholder="Find crate &#x1F50D;"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div class="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
             <a href="/" class="pure-menu-heading pure-menu-link"><i class="fa fa-cubes fa-fw"></i><span class="title"> Docs.rs</span></a>
           {{#with content.crate_details}}
diff --git a/templates/style.scss b/templates/style.scss
index d4022106e..96a84e5d2 100644
--- a/templates/style.scss
+++ b/templates/style.scss
@@ -173,23 +173,37 @@ div.nav-container {
     form.landing-search-form-nav {
         max-width: 1200px;
 
-        input.search-input-nav {
+        div.search-input-nav {
             float: right;
-            max-width: 200px;
-            border: none;
-            margin: 0 1em 0 0;
-            font-size: 0.8em;
-            text-align: right;
-            box-shadow: none;
-            background-color: #fff;
-            height: 31px;
+            max-width: 150px;
             display: none;
-            box-shadow: 0px 0px 2px #000;
+            border-left: 1px solid $color-border;
 
             @media #{$media-sm} {
                 display: block;
             }
+
+            @media #{$media-md} {
+                max-width: 200px;
+            }
+
+            label {
+                color: #777;
+                cursor: pointer;
+                padding-left: 0.5rem;
+                font-size: 0.8em;
+            }
+
+            input {
+                border: none;
+                margin: 0 1em 0 0;
+                font-size: 0.8em;
+                box-shadow: none;
+                background-color: #fff;
+                height: 31px;
+            }
         }
+        
 
         input.search-input-nav:focus {
             outline: unset;