Bootstrap collapse nav not working in custom wordpress theme - css

Question

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

Answer 1

Check if you included the javascript, the jquery javascript and the bootstrap javascript
bootstrap javascript
jquery javascript
this is usually the problem for not collapsing issues.
the jquery javascript must go first and then the bootstrap js file
/// this is your html markup
">
n/img/mj-logo.png" alt="Logo" class="logo-img">
Toggle navigation
if you want to add a logo or something else in your header put in a different column, is better not to mix things up.
try something like
<header>
<div class="container">
<div class="row">
<div class="col-md-4">
here goes whatever you want like your logo
</div>
<div class="col-md-8">
//here paste the navbar html code, not mixed with you header tag
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
if the above doesn't work, take out any css you have in order to check if one of your css is overriding the navbar css.