here markup nav using bootstrap.... i'm not sure why div class of 'mynavbar' not toggling open , close (by adding 'in' class it) when button data-target='.mynavbar' clicked (this on smaller screens hamburger type menu shows instead of links "work, about, contact)
also, on large , small screens, should li's clicked on have class of "active" added them? i'm not seeing happen either
<nav class='navbar navbar-fixed-top drop-shadow'> <div class='container-fluid'> <div class='navbar-header page-scroll'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a> </div> <div class='collapse navbar-collapse mynavbar'> <ul class='nav navbar-nav'> <li><a class='page-scroll' href='#work'>work</a></li> <li><a class='page-scroll' href='#about'>about</a></li> <li><a class='page-scroll' href='#contact'>contact</a></li> </ul> </div> </div> </nav>
you need target id in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. change element has collapse navbar-collapse class <div class="collapse navbar-collapse" id="mynavbar">
overall, code should work you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation"> <div class="container-fluid"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#"> <i class="glyphicon glyphicon-home"></i> </a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a class="page-scroll" href="#work">work</a></li> <li><a class="page-scroll" href="#about">about</a></li> <li><a class="page-scroll" href="#contact">contact</a></li> </ul> </div> </div> </nav> and, can add class="active" <li> when clicked, handled in server-side or in own url router
