navbar positioning

docs/assets/scss/_component-examples.scss

@@ -113,12 +113,6 @@
   }
 }
 
-
-// Tweak content of examples for optimum awesome
-.bd-example > *:last-child,
-.bd-example > .table-responsive:last-child > .table {
-  margin-bottom: 0 !important;
-}
 .bd-example > .close {
   float: none;
 }
@@ -183,44 +177,23 @@
 }
 
 // Navbars
-.bd-example .navbar:last-child {
-  margin-bottom: 0;
-}
-.bd-navbar-top-example,
-.bd-navbar-bottom-example {
-  z-index: 1;
-  padding: 0;
-  overflow: hidden; // cut the drop shadows off
-}
-.bd-navbar-top-example .navbar-header,
-.bd-navbar-bottom-example .navbar-header {
-  margin-left: 0;
-}
-.bd-navbar-top-example .navbar-fixed-top,
-.bd-navbar-bottom-example .navbar-fixed-bottom {
-  position: relative;
-  margin-right: 0;
-  margin-left: 0;
-}
-.bd-navbar-top-example {
-  padding-bottom: 45px;
-}
-.bd-navbar-top-example .navbar-fixed-top {
-  top: -1px;
-}
-.bd-navbar-bottom-example {
-  padding-top: 45px;
-}
-.bd-navbar-bottom-example .navbar-fixed-bottom {
-  bottom: -1px;
-}
-.bd-navbar-bottom-example .navbar {
-  margin-bottom: 0;
-}
-@media (min-width: 768px) {
-  .bd-navbar-top-example .navbar-fixed-top,
-  .bd-navbar-bottom-example .navbar-fixed-bottom {
-    position: absolute;
+.bd-example  {
+  .navbar-fixed-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+  .navbar-fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .navbar-fixed-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .navbar-fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
   }
 }
 

docs/components/navbar.md

@@ -162,6 +162,23 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 </nav>
 {% endexample %}
 
+## Placement
+
+Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
+
+{% example html %}
+<nav class="navbar navbar-fixed-top navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed top</a>
+</nav>
+{% endexample %}
+
+{% example html %}
+<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed bottom</a>
+</nav>
+{% endexample %}
+
+
 ## Collapsible content
 
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.