Bootstrap Collapsed Navbar Button doesn´t Working

Question

I have two sites. On the first, the Collapsed Navbar works: (Located at http://www.doca-rbz.de (Index Site))

 <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">DoCa</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Startseite</a></li> <li><a href="Kontakt.html">Kontakt</a></li> <li><a href="Guestbook/index.php">G&auml;stebuch</a></li> <li><a href="ueber_uns.html">&Uuml;ber uns</a></li> <li><a href="Galerie.html">Galerie</a></li> <li><a href="lieferer.html">Partner</a></li> <li><a href="login.php">Intern</a></li> </ul> </div> </div> </nav>

On the second page it doesn't work: (Located at http://www.doca-rbz.de/new_hp (also the index Site))

 <nav class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><span> Sch&uuml;lercafe DoCa </span></a> </div> <div class="navbar-collapse collapse" id="myNavbar" aria-expanded="false"> <ul class="navbar-nav nav"> <li><a href="#">Startseite</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">G&auml;stebuch</a></li> <li><a href="#">&Uuml;ber uns</a></li> <li><a href="#">Galerie</a></li> <li><a href="#">Partenr</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <div class="container"> <h1> Willkommen auf <span class="text-gold"> SERVERNAME </span></h1> </div> </div> </div>

Why does the second one not work?

Some more information about for the code:

First code block:

• "Handmade"--I have written it myself
• Worked everytime

Second code block:

• Copied from other Site
• Under it is a Jumbotron (Bootstrap)
• Has never worked
  

Answer 1

Looks like you are not properly adding "bootstrap.js" to the second website. I would recommend starting there - if not could you please update your question with the errors form your console or developer tools within your browser?

Update

<nav class = "navbar navbar-default" role = "navigation">

  <div class = "navbar-header">
     <button type = "button" class = "navbar-toggle" 
       data-toggle = "collapse" data-target = "#example-navbar-collapse">
       <span class = "sr-only">Toggle navigation</span>
       <span class = "icon-bar"></span>
       <span class = "icon-bar"></span>
       <span class = "icon-bar"></span>
     </button>
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
    </div>

  <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
    <ul class = "nav navbar-nav">
       <li class = "active"><a href = "#">iOS</a></li>
       <li><a href = "#">SVN</a></li>

       <li class = "dropdown">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
             Java 
             <b class = "caret"></b>
          </a>

          <ul class = "dropdown-menu">
             <li><a href = "#">jmeter</a></li>
             <li><a href = "#">EJB</a></li>
             <li><a href = "#">Jasper Report</a></li>

             <li class = "divider"></li>
             <li><a href = "#">Separated link</a></li>

             <li class = "divider"></li>
             <li><a href = "#">One more separated link</a></li>
          </ul>

       </li>
    </ul>
  </div>
</nav>

This is how it should be set up - Please try this and let me know if this works for you.