Sander Bloem Sander Bloem -4 years ago 124
HTML Question

Bootstrap collapse menu doesn't work

I've just installed bootstrap 3 but the collapsing menu doesn't work;
The menu looks fine in a desktop screen but scaling the hole thing down the menu button doesn't show up..

Here is the code for the menu:

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<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>

<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id=".nav-collapse">
<ul class="nav navbar-nav pull-right">

<li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Nederlands</a></li>
<li><a href="#">English</a></li>
<li><a href="#">German</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Euro</a></li>
<li><a href="#">Dollar</a></li>
<li><a href="#">Pond</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->




Answer Source

Assuming that you've put the jquery library , and after you've put the js file of bootstrap , I can think that the problem is with the data-target.

You're targeting the element with the id "nav-collapse", and you have ".nav-collapse" as id, so you need to take off that dot.

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
  <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>

    <a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
    <div id="nav-collapse">
        <ul class="nav navbar-nav pull-right">

    <li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederlands</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Euro</a></li>
        <li><a href="#">Dollar</a></li>
        <li><a href="#">Pond</a></li>
      </ul>
    </li>
  </ul>
    </div>
  </div>
  </div><!--End container-->
</div><!--End fixedtop-->

Here's a fiddle, and I changed some classes and some stuff to make the menu visible. Because if you didn't have the right CSS for it, it's pretty messed up like this.

And Note that you should always refer to the bootstrap docs , and try to stick to their methods to make your menu or anything else works perfectly fine.

And I saw that you've put the class "pull-right" for the menu , there's a class called "navbar-right" that works better that just pulling the menu to the right I think.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download