CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Tommy Mertell
Tommy Mertell

Reputation: 105

BootStrap Navbar Collapse issue

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>

enter image description here

Upvotes: 0

Views: 472

Answers (3)

Tania Rascia
Tania Rascia

Reputation: 1773

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.

Upvotes: 2

Manuel
Manuel

Reputation: 416

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!

Upvotes: 0

Frank
Frank

Reputation: 114

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.

Upvotes: 0

Related Questions