Improve navbar

webapp/src/main/webapp/themes/tenderfoot/css/navbar-breakpoint.css

@@ -0,0 +1,36 @@
+@media (max-width: 1200px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+        top: 0;
+        border-width: 0 0 1px;
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+        margin-top: 7.5px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+        display:block !important;
+    }
+}

webapp/src/main/webapp/themes/tenderfoot/css/screen.css

@@ -21,6 +21,7 @@ VIVO tenderfoot theme: screen styles
 @import url("reset.css");
 @import url("tenderfoot.css");
 @import url("edit.css");
+@import url("navbar-breakpoint.css");
 @import url("page-admin.css");
 @import url("page-browse.css");
 @import url("page-home.css");

webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css

@@ -26,10 +26,30 @@ legend {
     padding-left: 15px;
 }
 
+.navbar-toggle .button-label {
+    display: inline-block;
+    float: left;
+    font-weight: bold;
+    line-height: 14px;
+    padding-right: 10px;
+}
+.button-bars {
+    display: inline-block;
+    float: left;
+}
+
 p.navbar-text {
     margin-left: 15px;
 }
 
+#nav-searchbox {
+    float: right;
+}
+
+button.navbar-toggle {
+    z-index: 999;
+}
+
 body {
     padding: 0;
     height: 100%; /* needed for container min-height */

webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl

@@ -4,12 +4,13 @@
     <div id="nav">
         <div class="container">
             <nav class="navbar navbar-default">
-                <p class="navbar-text visible-xs-inline-block">Menu</p>
+                <button class="navbar-toggle pull-left" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
-                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="button-label">Menu</span>
-                    <span class="sr-only">Toggle navigation</span>
+                    <div class="button-bars">
-                    <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </div>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarContent">
                     <ul id="main-nav" role="list" class="nav navbar-nav mr-auto mt-2 mt-md-0">
@@ -22,6 +23,7 @@
                         <#include "search.ftl">
                         </li>
                     </ul>
+                </div>
             </nav>
         </div>
     </div>