navbar - Collapse navigation bar issue in bootstrap 3 -
went through suggestion adding navbar-right, still getting it.
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap practice</title> <!-- bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">tech site</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarheadercollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navbarheadercollapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">about</a></li> <li><a href="#">career</a></li> <li><a href="#">social media</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> </div> <script src="jquery-1.10.2.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
i think using old bootstrap/jquery versions. check plunk.
ok able reproduce error in firefox.
you missing 'navbar-header' div. should fix it.
<div class="navbar-header"> <a href="#" class="navbar-brand">tech site</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarheadercollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>
Comments
Post a Comment