CODEWITHSUNDEEP
twitter-bootstrapnavbar
ErezBerez
ErezBerez

Reputation: 131

How to show collapsing nav-bar using bootstrap

I have a Bootstrap nav-bar with some buttons which turns into a button when screen is resized.

Clicking the button however doesn't show the collapsible menu as it should.

I'm pretty sure it has something to do with the height of the div however I couldn't quite find the issue.

Any insights/tips/tricks/hints are appreciated.

Link to Codepen https://codepen.io/oldmanwithbeer/pen/ENzvoY?editors=1100

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-bar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Nav bar</a>
    </div>

    <div class="collapse navbar-collapse" id="nav-bar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#social">Links</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
</nav>

Upvotes: 0

Views: 152

Answers (1)

Eric G
Eric G

Reputation: 2617

You need to include both jQuery and Bootstrap JavaScript files to get the nav collapse to work.

I have updated your codepen code with a working version here:

https://codepen.io/egerrard/pen/YpmOGo

The tags you'll need to add will be something like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Make sure jQuery is included first.

Also, the Getting Started page on the Bootstrap website helps walk you through this information.

Upvotes: 1

Related Questions