Always show the search box in mobile view

RaphaelBergmann · Mar 2, 2017 · 582751c5e93f695636a851fef699f97cf22440f8 · 582751c
1 parent 95acc1b
commit 582751c5e93f695636a851fef699f97cf22440f8
Showing with 18 additions and 3 deletions.

+15 −0 css/style.css

+3 −3 index.html
diff --git a/css/style.css b/css/style.css
@@ -82,6 +82,21 @@ pre {
 }
 
 @media screen and (max-width: 980px) {
+    .nav-collapse ul {
+        padding-top:20px;
+    }
+    .navbar-search {
+        float: none;
+        margin: -5px 0 -6px -10px;
+        border-top: 0;
+        border-bottom: 0;
+        width:200px;
+        max-width:30%;
+        display:inline-block;
+    }
+    .navbar-search input {
+        max-width:100%;
+    }
     .splash h1 {
         font-size:40px;
     }

diff --git a/index.html b/index.html
@@ -42,15 +42,15 @@
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#"><img src="img/atlas.png" alt="Home" /></a>
+          <form id="nav-search" class="navbar-search pull-right">
+              <input type="text" class="search-query" placeholder="Search">
+          </form>
           <div class="nav-collapse">
             <ul class="nav navbar-nav">
               <li><a href="#/">Home</a></li>
               <li><a href="#/about">About</a></li>
               <li><a href="#/top10">Top 10 Relays</a></li>
             </ul>
-            <form id="nav-search" class="navbar-search pull-right">
-                <input type="text" class="search-query" placeholder="Search">
-            </form>
           </div>
         </div>
       </div>