Create class to scope main header changes (avoids overriding too much Bootstrap stuff); apply styles.

services/web/app/views/layout/navbar.pug

@@ -1,4 +1,4 @@
-nav.navbar.navbar-default
+nav.navbar.navbar-default.navbar-main
 	.container-fluid
 		.navbar-header
 			button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")

services/web/public/stylesheets/components/navbar.less

@@ -52,7 +52,6 @@
   overflow-x: visible;
   padding-right: @navbar-padding-horizontal;
   padding-left:  @navbar-padding-horizontal;
-  //border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;
@@ -89,6 +88,22 @@
 }
 
 
+.navbar-main {
+  z-index: 1;
+  .container-fluid > .navbar-collapse {
+    // High specificity needed to override Bootstrap's default.
+    margin: 0;
+  }
+  .navbar-collapse {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    background-color: @navbar-default-bg;
+    border-bottom: solid 1px @navbar-default-border;
+    padding: @navbar-default-padding;
+  }
+}
 // Both navbar header and collapse
 //
 // When a container is present, change the behavior of the header and collapse.
@@ -383,7 +398,6 @@
   top: 0;
   width: 100%;
   height: @header-height;
-  z-index: 1;
   
   .navbar-brand {
     position: absolute;