Navbar not collapsing with Bootstrap

Question

I have a website that is made with Twitter Bootstrap. On a large screen the navbar is looking nice as it should be but if you see the same navbar on a cellphone the navbar won't collapse.

This is my code:

<div class="container">
  <div class="masthead">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li class="active"><a href="/" class="">Home</a></li>
            <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
            <li><a href="koersen.html">Officiële koersen</a></li>
            <li><a href="webshop/" target="_blank">Webwinkel</a></li>
            <li><a href="diversen.html">Diversen</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

On the third class i also tried to use nav-collapse but then it is also collapsed on a large screen.

Answer 1

Yes follow the instructions from Betty St (include responsive css, bootstrap-collapse.js and the Transitions plugin update: (bootstrap-transition.js) and jQuery). You need to add a button / link which triggers the collapse. This tags get the attributes: data-toggle="collapse" data-target=".nav-collapse" where data-target can be any css selector. Put your nav between the tag selected under data-target, see: http://bootply.com/62921

html:

<div class="container">
      <div class="masthead">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="/" class="">Home</a></li>
                <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
                <li><a href="koersen.html">Officiële koersen</a></li>
                <li><a href="webshop/" target="_blank">Webwinkel</a></li>
                <li><a href="diversen.html">Diversen</a></li>
                <li><a href="contact.php">Contact</a></li>
              </ul>
              </div>  
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>
</div>

update Your code is missing the Transitions plugin (bootstrap-transition.js) required by the Collapse plugin. More important you didn't include jQuery. Now it should work see: http://plnkr.co/l66QqCftGNsaG0xkBrUf

javascript includes:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>

Note: Consider to include the compiled (or minified) version of the complete javascripts:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>  

You also need to change the style after collapsing:

.navbar .in .nav li {
   display: block;
   float: none;
   width:100%;
}

Answer 2

I had the similar kind of problem. I was totally confused of why my navigation bar is not collapsing in mobile phone. Atlast I found that I missed the following meta tag.

<meta name="viewport" content="width=device-width, user-scalable=false;">

This will solve the problem.