How do I get the navigation to collapse into the small icon for mobile devices?

Question

If you go on Twitter-Bootstrap website and reduce the window size below 1024x768, the navigation will change into an icon that you click for it. Is this one of the javascript pl

Answer 1

The navigation requires the nav-collapse property along with the .btn as well. This is an example:

<div class="container">
  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <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>

    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><

</div>

http://twitter.github.com/bootstrap/components.html#navbar for more details about collapsing the navigation.

SIDE NOTE Oct 3, 2012

I just started to make this with another application and ran into some trouble using the minimized files so I suggest you stick to the regular if your having issues even when everything is setup correctly. Here is my application.css now:

/*
 *= require_self
 *= require bootstrap
 *= require bootstrap-responsive
 *= require_tree .
 */
body { 
    padding-top: 60px; # this is for fixed-top navigation
}

Answer 2

If you just downloaded the bootstrap file by clicking the button it will not work right away when you are customizing your pages. You must download the latest jQuery file and replace that with the generic file path that they give you. You can also clean up the example files like this...

<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

into

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jqueryNEW.js"></script>
<script src="../assets/js/bootstrap.js"></script>

Or simply click the link that says "download with docs" and all your problems will be solved because all of the links will work

Answer 3

Hmm.. @LearningROR

I have nodified your code..

 <div class="navbar">  
<div class="navbar-inner">
<div class="container">
  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <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>

    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>

</div>
</div>
</div>

Answer 4

It's not JavaScript (save for the implementation of the togglable menu itself), it's CSS with media queries:

http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css