9

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 plugins? How do I get my website to do the same thing?

EDIT

strange

LearningRoR
  • 26,582
  • 22
  • 85
  • 150

4 Answers4

15

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
}
LearningRoR
  • 26,582
  • 22
  • 85
  • 150
  • What does this btn class do anyway? I don't get the comment above. --edit-- Nevermind. It is the toggle BUTTON that will appear. – Stephan Schielke Nov 22 '12 at 00:31
  • @LearningRoR any idea on my question? http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click – user1040259 Jan 07 '13 at 20:36
  • 2
    ok, but how do you make it collapse at a defined size? the default collapses at 970px, but i want to make it collapse at 300px. – ulkas Mar 02 '13 at 13:04
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

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159
  • I've included the bootstrap-responsive in my application and still can't figure out how to enable it. the instructions on the main website just say to include the css file in which I did, yet no changes. – LearningRoR Feb 05 '12 at 17:17
  • @wrbg: Did you read [the docs](http://twitter.github.com/bootstrap/)? Also, the CSS file isn't doing anything magical - if all you need is a collapsing menu, just do it yourself using the same media queries. – Matti Virkkunen Feb 05 '12 at 17:19
  • I believe so. I read the particular part about Responsive design at http://twitter.github.com/bootstrap/scaffolding.html. Everything else does collapse but the navigation does not. I have included a picture in my edit to show the error. – LearningRoR Feb 05 '12 at 17:27
  • You need `jQuery` for this and it has to be loaded before the `boostrap.js` file. – pgampe Oct 27 '12 at 21:42
1

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

Aaron
  • 11
  • 1
0

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>
atari400
  • 91
  • 1
  • 4
  • 11