Bootstrap collapse nav not working in custom wordpress theme

[admin]

I've looked at tons of examples and have done research and am very stuck.

I am building a custom wordpress theme using the html5 blank and bootstrap CDN. I am trying to collapse my nav in the responsive sizes. I am able to get it to collapse and create the button, however I can not get it expose the content.

Here is my html and css. What am I missing and/or doing wrong and what else can I provide for you to better assist an answer?

<header class="banner navbar navbar-static-top navbar-default header page-section clear" role="banner">
    <div class="wrapper clear">
        <div class="logo">
            <a href="<?php echo home_url(); ?>">
                                    <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
        n<img src="<?php echo get_template_directory_uri(); ?>/img/mj-logo.png" alt="Logo" class="logo-img">
                </a>
        </div>
        <div class="navbar-header">
                <button type="button" style="background-color:black" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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>
            </div>
        <nav class="nav collapse navbar-collapse" role="navigation">
            <?php html5blank_nav(); ?>
        </nav>
    </div>
 </header>


.wrapper {
    max-width:1280px;
    width:95%;
    margin:0 auto;
    position:relative;
}
/* header */
.header {
    top:0;
    left:0;
    right:0;
    position: fixed;
    background:#fff;
    z-index: 1;
    height: 0px;
    overflow:hidden;
    display:block;
    opacity: 0;
    transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -webkit-transition: all .32s ease-in-out;
}
.header.active {
    opacity:1;
    height: 80px;
}
   .page-section {
      width:100%;
      height:100%;
      margin:auto;
  }

order of js links:

/wp-includes/js/jquery/jquery.js?ver=1.11.0
/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.
/wp-content/themes/michaeljerome.com/js/scripts.js?ver=1.0.0
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js