javascript - Hide Bootstrap nav collapse on click -


by selecting category responsive menu (the template 1 page), want hide nav collapse automatically when clicking. stroll use navigation, since template has 1 page. seek solution not affect it, here html code of menu:

site demo here: www.malouinternational.com/index2.html

 <nav class="navbar navbar-default navbar-fixed-top">     <div class="container">         <div class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>         </div>          <div  id="navbar" class="navbar-collapse collapse" >             <ul class="nav navbar-nav navbar-left ">                 <li><a href="#" class="scroll-top" data-id="top">home</a></li>                 <li><a href="#" class="scroll-link" data-id="about">about</a></li>                 <li><a href="#" class="scroll-link" data-id="our-team">our team</a></li>                 <li><a href="#" class="scroll-link" data-id="jewellery">jewellery</a></li>                 <li><a href="#" class="scroll-link" data-id="trade">trade</a></li>                 <li><a href="#" class="scroll-link" data-id="social-corporate">social & corporate</a></li>                 <li><a href="#" class="scroll-link" data-id="press">press</a></li>                 <li><a href="#" class="scroll-link" data-id="contact">contact</a></li>             </ul>             <ul class="nav navbar-nav navbar-left " style="color: #000; padding-left: 30px; padding-top: 15px;">                 <a href="https://www.facebook.com/malouinternational"><i class="fa fa-facebook"></i></a>                 <a href="https://twitter.com/malou_int"><i class="fa fa-twitter  "></i></a>                 <a href="https://instagram.com/malouinternational/"><i class="fa fa-instagram  "></i></a>                 <a href="mailto:info@malouinternational.com"><i class="fa fa-envelope  "></i></a>                 <a href="katalog/index.html" target="_blank"><i class="fa fa-book"></i></a>             </ul>             <ul class="navbar-text navbar-right " style="color: #000; ">                 <li style="margin-left: 20px; font-size: 13px; display:inline;"><a href="#" class="scroll-link" data-id="contact">tr</a></li>                 <li style="margin-right:10px; font-size: 13px; display:inline;"><a href="#" class="scroll-link" data-id="contact">en</a></li>             </ul>              <div id="sb-search" class="sb-search right" style="position: absolute; right: 70px; top: 0">                 <form>                     <input class="sb-search-input" type="search" name="search" id="search">                     <input class="sb-search-submit" type="submit" value="">                     <span class="sb-icon-search"></span>                 </form>             </div>          </div>     </div> </nav> 

the order in load jquery , bootstrap important. make sure specify jquery library before bootstrap javascript.

additionally have several 404 errors due files missing server, should resolve too.


Comments