More comments, navbar section nearly done

- fixed dropdown pointer

index.html

@@ -124,38 +124,37 @@
 
   <!-- Begin giant container for the entirety of the page content -->
   <div class="container">
-
-
     <div class="row row-offcanvas row-offcanvas-right">
-
       <div class="col-12 col-md-9">
-
         <br />
         <h1>Masonstrap</h1>
+        <!-- dynamic version number -->
         <h4 id="version"></h4>
         <br />
         <p class="lead">Easily provide any web project with Mason branding.</p>
 
-
         <!-- Navbar
         ================================================== -->
         <div class="bs-docs-section clearfix">
           <div class="row">
             <div class="col-lg-12">
+
+              <!-- Header title -->
               <div class="page-header">
                 <h1 id="navbars">Navbars
                   <hr />
                 </h1>
               </div>
 
+              <!-- Example navbar 0 -->
               <div class="bs-component">
                 <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
+                  <div class="container">
                     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
                       aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                     <a class="navbar-brand" href="#">Navbar</a>
-
                     <div class="collapse navbar-collapse" id="navbarColor01">
                       <ul class="navbar-nav mr-auto">
                         <li class="nav-item active">
@@ -176,18 +175,20 @@
                         <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                       </form>
                     </div>
+                  </div>
                 </nav>
               </div>
 
+              <!-- Example navbar 1 -->
               <div class="bs-component">
-                <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
-                  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
+                <nav class="navbar navbar-toggleable-md navbar-inverse bg-classic">
+                  <div class="container">
+                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor01"
                       aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                     <a class="navbar-brand" href="#">Navbar</a>
-
-                  <div class="collapse navbar-collapse" id="navbarColor01">
+                    <div class="collapse navbar-collapse" id="navbarColor02">
                       <ul class="navbar-nav mr-auto">
                         <li class="nav-item active">
                           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -207,9 +208,9 @@
                         <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                       </form>
                     </div>
+                  </div>
                 </nav>
               </div>
-
             </div>
           </div>
         </div>
@@ -1389,13 +1390,12 @@
         </footer>
       </div>
 
-      <div class="col-6 col-md-3 sidebar-offcanvas" style="position: fixed;
-    right: 0;">
+      <div class="col-6 col-md-3 sidebar-offcanvas" style="position: fixed; right: 0;">
         <!-- sidebar -->
         <div class="row">
-          <div class="col-lg-3 col-md-3 col-sm-4 hidden-sm-down" style="max-width: 100%;
-">
-            <div class="rounded list-group table-of-contents">
+          <div class="col-lg-3 col-md-3 col-sm-4 hidden-sm-down" style="max-width: 100%;">
+            <div class="list-group">
+              <a class="list-group-item list-group-item-action" href="#top">Top</a>
               <a class="list-group-item list-group-item-action" href="#navbars">Navbars</a>
               <a class="list-group-item list-group-item-action" href="#buttons">Buttons</a>
               <a class="list-group-item list-group-item-action" href="#typography">Typography</a>
@@ -1411,10 +1411,7 @@
           </div>
         </div>
       </div>
-
-
     </div>
-
   </div>
 
   <!-- load in external js -->