Bootstrap collapse button not working on WordPress

admin

Administrator
Staff member
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


Code:
<!--[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

Code:
<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>