Bootstrap collapsable navigation not collapsing
Question
I'm working on creating a bootstrap collapsable navigation. It looks like everything is set up correctly. The mobile nav DOES work with expanding correctly, HOWEVER the collapse isn't working. I've checked to include jquery and the bootstrap files, but I'm stuck. Any suggestions?
<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/sixminutes.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top" style="background-color:#E6E7E8; height:auto; overflow: hidden;border: none;">
<div class="container">
<div class="navbar-brand col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="#">
<img class="img-responsive" src="images/logo.png" style="float:left; padding-left:30px; width: 100%; max-width: 500px;"></a>
</div>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-lg-8 col-md-8" style="padding-right: 50px; margin-top: 30px;">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><h5 class="nav">ABOUT</h5></a></li>
<li><a href="#"><h5 class="nav">ARTICLES</h5></a></li>
<li><a href="#"><h5 class="nav">TESTIMONIALS</h5></a></li>
<li><a href="#"><h5 class="nav">JOIN</h5></a></li>
<li><a href=#"><h5 class="nav">CONTACT</h5></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /header -->
1 answers
solution1
1 ACCPTED 2014-10-03 00:49:46
I'm not sure why you have these grid classes " col-lg-4 col-md-4 col-sm-12 col-xs-12" in your navbar-brand, but they are the problem in your code:
Try this code:
<div class="navbar navbar-inverse navbar-static-top" style="background-color:#E6E7E8; height:auto; overflow: hidden;border: none;">
<div class="container">
<div class="navbar-brand col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="#">
<img class="img-responsive" src="images/logo.png" style="float:left; padding-left:30px; width: 100%; max-width: 500px;"></a>
</div>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-lg-8 col-md-8" style="padding-right: 50px; margin-top: 30px;">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><h5 class="nav">ABOUT</h5></a></li>
<li><a href="#"><h5 class="nav">ARTICLES</h5></a></li>
<li><a href="#"><h5 class="nav">TESTIMONIALS</h5></a></li>
<li><a href="#"><h5 class="nav">JOIN</h5></a></li>
<li><a href=#"><h5 class="nav">CONTACT</h5></a></li>
</ul>
</div>
</div>
</div>
</div>
Here is a jsFiddle Example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap navigation bar collapsing issue
Bootstrap navigation is not collapsing on mobile screen for same page navigation ( #sections )?
Collapsable sidebar / navigation menu
collapsable menu using bootstrap
Bootstrap nested collapsable panels
Collapsable panel with bootstrap and knockout
Off centered Bootstrap Collapsable panel
Collapsable Menu Not Opening in Bootstrap Framework
How to make a collapsable bootstrap navbar?
Bootstrap collapsable bar side effect
Related Tags