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\'

Answer 1

you need to include the responsive css file of twitter bootstrap, and also use the bootstrap-collapse.js.

Note the info on http://twitter.github.io/bootstrap/components.html#navbar at 'responsive navbar':

Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

Quicklinks:

• css: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
• js: http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js

Answer 2

To add to dustbuster, I also had the issue and tried to load the JQuery first then the Boostrap but the issue didn't get resolved and noted another hint from the link below: -

https://www.freecodecamp.org/forum/t/solved-my-bootstrap-navbar-toggle-is-not-toggling/15222/20

To add the Bootstrap.min.js instead of Bootstrap.min.css. Please do not remove the Bootstrap.min.css when adding the js. Once both added, the issue was resolved.

Answer 3

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 4

1. You will need to have the compiled version of bootstrap.js or bootstrap.min.js with collapse and transition checked[and therefore included] for compilation.
2. Give your parent div an id. If it already has one, take note of it. Your parent div is going to be the one whose immediate children comprise the dropdown [the links, buttons, etc.]
3. Add data-toggle and data-target to each of the child elements of our previously talked-about parent div.
   Assuming the parent div's is id="my_parent_div", the child elements should each have data-toggle="collapse" data-target="#my_parent_div" appended inside the link attribute.

Here's a sample from my fixed navbar code:

<div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#book"  data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li>
        <li class="divider"></li>
        <li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li>
        <li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li>
        <li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li>
      </ul>
    </div>

Hope this helps :)

Answer 5

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.

Answer 6

I had the same issue, I found that i was loading jQuery twice, and I was loading jQuery in the footer, AFTER bootstrap. Everything else worked on the page except for the collapse for some reason. I went back to basics, and it solved the issue. Load jQuery, then bootstrap, and make sure there's no other random includes pages that are loading jQuery as well. This relates to bootstrap 4 nav elements.