I am trying to apply a bootstrap header to the website I am working with on WordPress, it works as far as the menu li's disappear when the screen is smaller but the button does not open the menu. I have checked the developer tools and there are no errors so I assume everything is included.
Here is the code in the header.php
<!--[if IEMobile 7 ]> <html <?php language_attributes(); ?>class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title(''); ?></title>
<meta name="author" content="" />
<!-- make it awesome for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<!-- wordpress head functions -->
<?php wp_head(); ?>
<!-- end of wordpress head -->
<link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/custom.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link href="<?php bloginfo('template_directory'); ?>/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<meta property="og:locale" content="en_GB" />
<meta property="og:logo" content="/wp-content/uploads/logo.jpg" />
<?php if (is_single()) {
$css = get_post_meta($post->ID, 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo $css; ?>
</style>
<?php }
} ?>
</head>
<body <?php body_class(); ?>>
<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>
<div id="wrap">
<header>
<div class="row header-social-section">
<div class="col-md-12">
<div class="container">
<!--<div class="col-md-3 logo"><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/logo.png" class="headerlogo" alt=""/></a></div>-->
<div class="navbar" role="navigation">
<div class="navbar-header">
<a href="<?php bloginfo('url'); ?>/" class="pull-left"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/logo.png" class="headerlogo" alt=""/></a>
<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 class="collapse navbar-collapse">
<?php wp_nav_menu( array( 'container_class' => '', 'menu_class' => 'nav navbar-nav', 'menu_id' => '','theme_location' => 'primary' ) ); ?>
</div><!-- /.nav-collapse -->
</div><!-- /.navbar -->
</div>
</div>
</div><!-- End Social Header -->
</header>
Generated HTML
<header>
<div class="row header-social-section">
<div class="col-md-12">
<div class="container">
<!--<div class="col-md-3 logo"><a href="http://incitenewbusiness.co.uk/"><img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/></a></div>-->
<div class="navbar" role="navigation">
<div class="navbar-header">
<a href="http://incitenewbusiness.co.uk/" class="pull-left"><img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/></a>
<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 class="collapse navbar-collapse">
<div class="menu-main-menu-container"><ul id="menu-main-menu" class="nav navbar-nav"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-14"><a href="http://incitenewbusiness.co.uk">Home</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://incitenewbusiness.co.uk/about-incite-new-business-agency/">About</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://incitenewbusiness.co.uk/new-business-agency-how/">How</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="http://incitenewbusiness.co.uk/category/latest-incites/">Latest Incites</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://incitenewbusiness.co.uk/incite-new-business-agency-testimonials/">Testimonials</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://incitenewbusiness.co.uk/contact/">Contact</a></li>
<li id="menu-item-600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-600"><a href="http://incitenewbusiness.co.uk/jobs/">Jobs</a></li>
</ul></div>
</div><!-- /.nav-collapse -->
</div><!-- /.navbar -->
</div>
</div>
</div><!-- End Social Header -->
</header>
