working navbar.

assignment.js

@@ -3,7 +3,8 @@ const EVENT_TEMPLATES_LOADED = "templates:loaded";
 const templateNames = [
   "class",
   "home",
-  "species"
+  "species",
+  "about"
 ];
 
 const partialNames = [

assignment.scss

@@ -0,0 +1,7 @@
+//$bsInfoBg: #5bc0de;
+//$bsInfoBo: #46B8DA;
+//
+//.navbar .active {
+//  background-color: $bsInfoBg;
+//  border-color: $bsInfoBo;
+//}

templates/about.hbs

@@ -0,0 +1,9 @@
+<div class="about">
+  {{> nav activeAbout="active" }}
+
+    <div class="container">
+      <ul>
+        <li><a href="https://www.youtube.com/watch?v=HDH6dcbRtuU&amp;feature=youtu.be&amp;t=37s" title="Animals: Dogs">More "Animals"</a></li>
+      </ul>
+    </div>
+</div>

templates/class.hbs

@@ -1,3 +1,4 @@
 <div class="class">
+  {{> nav activeGallery="active" }}
   CLASS {{ greeting }} {{ moreText }}
 </div>

templates/home.hbs

@@ -1,3 +1,4 @@
 <div class="home">
+  {{> nav activeGallery="active" }}
   HOME
 </div>

templates/nav.hbs

@@ -1,9 +1,27 @@
-<div class="nav">
-  <nav role="navigation">
-    <div class="nav navbar-default">
-      <div class="navbar-brand">
-        <a href="https://www.youtube.com/watch?v=HDH6dcbRtuU&amp;feature=youtu.be&amp;t=37s" title="Animals: Dogs">Animals</a>
-      </div>
-    </div>
-  </nav>
-</div>
+<nav role="navigation" class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" aria-expanded="false" class="navbar-toggle collapsed"
+        data-toggle="collapse"
+        data-target="#animals-navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Animals</a>
+    </div><!-- .navbar-header -->
+
+    <div class="hidden-xs">
+      <ul class="nav navbar-nav navbar-left">
+        <li class="{{activeGallery}}"><a href="#">Gallery</a></li>
+      </ul>
+    </div><!-- #animals-navbar-collapse -->
+
+    <div class="collapse navbar-collapse" id="animals-navbar-collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="{{activeAbout}}"><a href="#about">About</a></li>
+      </ul>
+    </div><!-- #animals-navbar-collapse -->
+  </div><!-- .container-fluid -->
+</nav>

templates/species.hbs

@@ -1,3 +1,4 @@
 <div class="species">
-  SPECIES
+  {{> nav activeGallery="active" }}
+SPECIES
 </div>