boostrap 3.1.1 navbar - toggle button does not appear on page
Posted
by
PST
on Stack Overflow
See other posts from Stack Overflow
or by PST
Published on 2014-03-19T10:37:50Z
Indexed on
2014/05/31
9:26 UTC
Read the original article
Hit count: 193
I am trying to use bootstrap nav bar with toggle functionality. With sample code as below, my page is not showing toggle button on the header bar. NavHeader (NavBarMenuCaption) and 1st menu item appears on the same line.
Bootply link http://www.bootply.com/123050#
what could be wrong in below code?
<!DOCTYPE html>
<html>
<head>
<title>Bootstap menu demo</title>
<link rel="stylesheet" href="vendor/bootstrap-3.1.1-dist/css/bootstrap.min.css">
</head>
<body>
<h2>This is bootstap navbar demo</h2>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-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>
<a class="navbar-brand" href="#">NavBarMenuCaption</a>
</div>
<div class="navbar-collapse collapse" id="example-navbar-collapse">
<ul class="nav nav-pills nav-stacked">
<li ><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="vendor/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
</body>
© Stack Overflow or respective owner
