javascript - bootstrap navbar mobile toggle not working -
i loaded bootstrap css , js files , added html code of following. both succesfully loaded - css in head tag , js below footer. other functions working fine.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container container-header"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="{{ url_for('public.home') }}"> nektime </a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="{{ url_for('public.home') }}">home</a></li> <li><a href="{{ url_for('public.about') }}">about</a></li> </ul> {% if current_user , current_user.is_authenticated() %} <ul class="nav navbar-nav navbar-right"> <li> <p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">logged in {{ current_user.username }}</a></p> </li> <li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li> </ul> {% elif form %} <ul class="nav navbar-nav navbar-right"> <li><a href="{{ url_for('public.register') }}">create account</a></li> </ul> <form id="loginform" method="post" class="navbar-form form-inline navbar-right" action="/" role="login"> {{ form.hidden_tag() }} <div class="form-group"> {{ form.username(placeholder="username", class_="form-control") }} {{ form.password(placeholder="password", class_="form-control") }} </div> <button type="submit" class="btn btn-default">log in</button> </form> {% endif %} </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav>
when shrink browser, toggle button replaces other menus, cannot expand toggle button. managed right data-target.. don't know next
i added collapsed
class in button tag, , works. following code.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse">