diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index 071980b3..5e6ea314 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -36,6 +36,8 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
     -moz-box-shadow: 0 5px 8px -6px #777;
     box-shadow: 0 5px 8px -6px #777;
 }
+.navbar-default .navbar-toggle .icon-bar {background-color: #000;}
+.navbar-default .navbar-toggle {border-color: #000;}
 
 .btn-file {position: relative; overflow: hidden;}
 .btn-file input[type=file] {position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block;}
diff --git a/cps/templates/layout.html b/cps/templates/layout.html
index 7e63b93b..71bd7941 100644
--- a/cps/templates/layout.html
+++ b/cps/templates/layout.html
@@ -52,17 +52,19 @@
           </button>
           <a class="navbar-brand" href="{{url_for('index')}}">Calibre Web</a>
         </div>
+        {% if g.user.is_authenticated or g.user.is_anonymous() %}
+          <form class="navbar-form navbar-left" role="search" action="{{url_for('search')}}" method="GET">
+            <div class="form-group input-group input-group-sm">
+              <input type="text" class="form-control" name="query" placeholder="{{_('Search')}}">
+              <span class="input-group-btn">
+                <button type="submit" class="btn btn-default">{{_('Go!')}}</button>
+              </span>
+            </div>
+          </form>
+        {% endif %}
         <div class="navbar-collapse collapse">
           {% if g.user.is_authenticated or g.user.is_anonymous() %}
           <ul class="nav navbar-nav ">
-            <li>
-              <form class="navbar-form navbar-left" role="search" action="{{url_for('search')}}" method="GET">
-                <div class="form-group">
-                  <input type="text" class="form-control" name="query" placeholder="{{_('Search')}}">
-                </div>
-                <button type="submit" class="btn btn-default">{{_('Go!')}}</button>
-              </form>
-            </li>
             <li><a href="{{url_for('advanced_search')}}"><span class="glyphicon glyphicon-search"></span> {{_('Advanced Search')}}</a></li>
           </ul>
           {% endif %}
@@ -80,11 +82,11 @@
                 {% endif %}
               {% endif %}
               {% if g.user.role_admin() %}
-                <li><a id="top_admin" href="{{url_for('admin')}}"><span class="glyphicon glyphicon-dashboard"></span> {{_('Admin')}}</a></li>
+                <li><a id="top_admin" href="{{url_for('admin')}}"><span class="glyphicon glyphicon-dashboard"></span><span class="hidden-sm"> {{_('Admin')}}</span></a></li>
               {% endif %}
-              <li><a id="top_user" href="{{url_for('profile')}}"><span class="glyphicon glyphicon-user"></span> {{g.user.nickname}}</a></li>
+              <li><a id="top_user" href="{{url_for('profile')}}"><span class="glyphicon glyphicon-user"></span><span class="hidden-sm"> {{g.user.nickname}}</span></a></li>
               {% if not g.user.is_anonymous() %}
-              <li><a id="logout" href="{{url_for('logout')}}"><span class="glyphicon glyphicon-log-out"></span> {{_('Logout')}}</a></li>
+              <li><a id="logout" href="{{url_for('logout')}}"><span class="glyphicon glyphicon-log-out"></span><span class="hidden-sm"> {{_('Logout')}}</span></a></li>
               {% endif %}
             {% endif %}
             {% if g.allow_registration and not g.user.is_authenticated %}