Fixed the navbar so it closes upon clicking on the screen

myang310 · myang310 · commit 1d78fcefd0e5 · 2016-08-09T15:21:08.000-04:00
diff --git a/index.html b/index.html
@@ -23,20 +23,6 @@
 
         <link rel="stylesheet" href="css/style.css">
 
-        <!-- Latest compiled and minified JavaScript -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
-        <!-- Script to scroll via the navigation bar -->
-        <script type="text/javascript">
-          jQuery(document).ready(function($) {
-            $(".scroll").click(function(event) {
-            event.preventDefault();
-            $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
-            } );
-          } );
-        </script>
-
 </head>
 
 <body>
@@ -45,7 +31,7 @@
       <div class="container">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -57,12 +43,12 @@
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      
           <ul class="nav navbar-nav navbar-right">
-            <li><a class="scroll" href="#about">About</a></li>
-            <li><a class="scroll" href="#experience">Experience</a></li>
-            <li><a class="scroll" href="#education">Education</a></li>            
-            <li><a class="scroll" href="#interests">Interests</a></li>
-            <li><a href="resume.pdf">Resume</a></li>
-            <li><a class="scroll" href="#contact">Contact</a></li>
+            <li><a class="scroll" href="#about" data-toggle="collapse" data-target=".navbar-collapse">About</a></li>
+            <li><a class="scroll" href="#experience" data-toggle="collapse" data-target=".navbar-collapse">Experience</a></li>
+            <li><a class="scroll" href="#education" data-toggle="collapse" data-target=".navbar-collapse">Education</a></li>            
+            <li><a class="scroll" href="#interests" data-toggle="collapse" data-target=".navbar-collapse">Interests</a></li>
+            <li><a href="resume.pdf" data-toggle="collapse" data-target=".navbar-collapse">Resume</a></li>
+            <li><a class="scroll" href="#contact" data-toggle="collapse" data-target=".navbar-collapse">Contact</a></li>
           </ul>
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
@@ -269,6 +255,7 @@ <h4 class="modal-title" id="modalLabel6"><strong>Nutrition Intern</strong>
                         </div>
                     </div>
                 </div>
+
             </div>
             </div>
         </div>
@@ -336,6 +323,15 @@ <h1>Contact Me</h1>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
+    <!-- Script to scroll via the navigation bar -->
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
+            $(".scroll").click(function(event) {
+                event.preventDefault();
+                $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
+            } );
+        } );
+    </script>    
 </body>
 
 </html>
