Let .navbar-wrapper flow in Carousel example

A .navbar-wrapper followed by a .carousel works well in this example,
but when the navbar is not followed by a carousel, content flows
underneath the navbar because it is absolutely positioned.

Letting .navbar-wrapper be part of the flow and moving the negative
margin to the .carousel to bring it underneath the navbar makes these
example styles suitable for pages without carousels.

1 files changed, 4 insertions, 6 deletions

diff --git a/carousel/example.css b/carousel/example.css
index d31149b2e..3d997481e 100644
--- a/carousel/example.css
+++ b/carousel/example.css
@@ -15,10 +15,6 @@ body {
 
 /* Special class on .container surrounding .navbar, used for positioning it into place. */
 .navbar-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
   z-index: 10;
 }
 
@@ -30,6 +26,9 @@ body {
 /* Carousel base class */
 .carousel {
   margin-bottom: 60px;
+
+  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+  margin-top: -90px;
 }
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
@@ -119,7 +118,6 @@ body {
   /* Navbar positioning foo */
   .navbar-wrapper {
     margin-top: 20px;
-    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
   }
   /* The navbar becomes detached from the top, so we round the corners */
   .navbar-wrapper .navbar {
@@ -133,4 +131,4 @@ body {
     line-height: 1.4;
   }
 
-}
\ No newline at end of file
+}