Removed margin from map so it is visible below the navigation bar, updated the Navbar template to allow bootstrap functionality of collapsing it with a button for small displays.

Author: santilland

app/styles/main.scss

@@ -206,7 +206,7 @@ div#preload {
  */
 
 .navbar-opaque{
-    opacity: 0.95;
+    opacity: 0.92;
 }
 
 /*
@@ -466,7 +466,7 @@ button[active=active] {
 	height: 100%;
 	width: 100%;
 	position: absolute;
-  padding-top: 50px !important;
+  //padding-top: 50px !important;
 }
 
 #leftSideBar {
@@ -512,8 +512,8 @@ button[active=active] {
 	//position: relative;
 }
 
-#OpenLayers_Control_Zoom_5 {
-	top: 60px;
+.olControlZoom {
+	top: 60px !important;
 }
 
 .tab-header {

app/templates/NavBar.hbs

@@ -1,10 +1,17 @@
-<div class="navbar navbar-inverse navbar-fixed-top">
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
-    <div class="collapse navbar-collapse">
+  	<div class="navbar-header">
+  		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+		</button>
+        <a class="navbar-brand" href="{{url}}" style="font-size:30px">{{title}}</a>
+    </div>
+    <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav" id="tab-headers-main">
-        <li><a class="tab-header" target="_blank" href="{{url}}" style="font-size:30px"><strong>{{title}}</strong></a></li>
         <li class="divider-vertical"></li>
       </ul>
-    </div><!--/.nav-collapse -->
+    </div>
   </div>
-</div>
+</div>