Fix the nav item collapse and spy functionality (#138)

layouts/partials/navigators/navbar.html

@@ -31,16 +31,7 @@
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a
+          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
-            class="nav-link"
-            href="#home"
-            data-toggle="collapse"
-            data-target=".navbar-collapse"
-            aria-controls="collapseExample"
-            role="button"
-          >
-            {{ i18n "home" }}
-          </a>
         </li>
         {{ if $sections }}
           {{ range sort $sections "section.weight" }}
@@ -50,15 +41,7 @@
                 {{ $sectionID = .section.id }}
               {{ end }}
               <li class="nav-item">
-                <a
+                <a class="nav-link" href="#{{ $sectionID }}">{{ .section.name }}</a>
-                  class="nav-link"
-                  href="#{{ $sectionID }}"
-                  data-toggle="collapse"
-                  data-target=".navbar-collapse"
-                  aria-controls="collapseExample"
-                >
-                  {{ .section.name }}
-                </a>
               </li>
             {{ end }}
           {{- end }}

static/assets/js/navbar.js

@@ -30,6 +30,15 @@
         $('#logo').attr("src", invertedLogo);
       }
     });
+
+    // Creates a click handler to collapse the navigation when
+    // anchors in the mobile nav pop up are clicked
+    var navMain = $(".navbar-collapse");
+    if (navMain) {
+      navMain.on("click", "a", null, function (e) {
+        $('.navbar-collapse').collapse('hide');
+      });
+    }
   });
 
 })(jQuery);