BootStrap Navbar Collapse issue

Question

I commented out the remainder of the code to see if it was any of the outside elements that was causing the issue, they're not. jQuery is linked and so is BootStrap. The button shows up, but the collapse feature is not working. Maybe it's just my eyes and I spelled something wrong, but what's wrong in this code?

<div class="navbar navbar-inverse navbar-static-top">
 <div class="container">
<div class="navbar-brand">
  <a href="#about">
  <span class="glyphicon glyphicon-lamp"></span>Tommy Mertell
  </a>
</div>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="glyphicon glyphicon-lamp" style="color:white;"></span>
  </button>
 <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav navbar-right">
     <li><a href="#home" class="active">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#port">Portfolio</a></li>
     <li><a href="#contact">Contact</a></li>
   </ul>
  </div>
   </div>
  </div>

Answer 1

Here is a fiddle with your updated pen .

You did not end your comment.

You started a comment...

<!--

But you did not add the ending comment line.

-->

Because of this, the jQuery and Bootstrap are not loading at the end of the page.

Answer 2

Open up console and make sure you don't have any errors on the page. I copied your code and put it on a page with Bootstrap and jQuery and it was working for me. Although you should change the structure a bit because there were some horizontal scrollbars. I would put your branding and your navbar-toggle button inside of a div with the class navbar-header to start.

Answer 3

Can you try replacing the script and link tags to bootstrap and jquery and put these (following the same order).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Maybe is something related to versions, or the order you're loading scripts/css.

Hope that helps!