Mobile Nav funktioniert nicht

Question

Kann jemand das Problem hier erkennen? Mein Handy nav funktioniert nicht. Die Schaltfläche erscheint gut, aber nichts passiert, wenn Sie darauf klicken.

Jede Hilfe sehr geschätzt

<!-- Header ================================================== --> 
<header class="site-header" role="banner"> 

    <!-- Section 1: NAV ================================================== --> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div id="top-bar" class="container-fluid nav-container"> 
      <div> 
       <div> 
        <span style="padding: 25px">Open 10:30am till late | Tel: +353 (0)XXXXXXXXXXX</span> 
        <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/social-icons.png"> 
       </div> 
      </div> 
     </div> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <a class="navbar-brand" href="#"> 
      <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png"> 
     </a> 
     <!--logo --> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#!">Menus</a></li> 
       <li><a href="/mcs/host-your-party/">Host your party!</a></li> 
       <li><a href="/mcs/#events">Events</a></li> 
       <li><a href="#offers">Offers</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#!">Contact</a></li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</header>  

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 

 
     <div id="top-bar" class="container-fluid nav-container"> 
 

 
      <div> 
 

 
       <div><span style="padding: 25px">Open 10:30am till late | Tel: +353 (0)1 497 9775</span> 
 

 
         <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/social-icons.png"> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div> 
 

 
     <div class="navbar-header"> 
 

 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 

 
     <a class="navbar-brand" href="#"> <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png"></a> <!--logo --> 
 

 

 

 
     <div id="navbar" class="navbar-collapse collapse"> 
 

 

 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#!">Menus</a></li> 
 
       <li><a href="/mcs/host-your-party/">Host your party!</a></li> 
 
       <li><a href="/mcs/#events">Events</a></li> 
 
       <li><a href="#offers">Offers</a></li> 
 
       <li><a href="#gallery">Gallery</a></li> 
 
       <li><a href="#!">Contact</a></li> 
 
      </ul> 
 

 
     </div><!--/.nav-collapse --> 
 

 
    </div>