html - Bootstrap Navbar unable to collapse -
i want click button in header expand list of links, expands, , unable hide. should working normally?
here code:
<!-- navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <!-- button collapse list --> <a href="#homepage"><img class="icon" alt="brand" src="img/icon.ico"></a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsebtn" aria-expanded="false" aria-controls="collapsebtn"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- list expect collapse when hit button --> <div class="collapse navbar-collapse in" id="collapsebtn"> <ul class="container-fluid nav navbar-nav pull-right"> <li><a href="#edu"><h4 class="navbar-items">education</h4></a></li> <li><a href="#exp"><h4 class="navbar-items">experience</h4></a></li> <li><a href="#skill"><h4 class="navbar-items">skills</h4></a></li> <li><a href="#contact"><h4 class="navbar-items">contact me</h4></a></li> </ul> </div> </div> </nav>
you have class of in in navbar-collapse causing remain open other code working fine can see in following fiddle
you want remove class of in navbar-collapse , if having trouble getting open more forgot load jquery.js before loading bootstrap.js. before bootstrap javascript file need load jquery javascript library. bootstrap's javascript works off of jquery need load jquery library first. before bootstrap js script link add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> then after load bootstrap js file
<script src="bootstrap.js"></script> 
Comments
Post a Comment