This situation is strange. When I open my website (built on bootstrap) on small screens navbar is visible, but it should be collapse. When I click on button to collapse, it is still visible, when I click second time it is collapse just now. And since that it works good. But when I reload page, I still have this issue.
<div class=container>
<!--MENU-->
<nav style="border-bottom:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container nbar">
<ul class="nav nav-justified">
<li><a href=#>o nas</a></li>
<li><a href=#>galeria</a></li>
<li><a href=#>blog</a></li>
<li><a href=#>kontakt</a></li>
</ul>
</div>
</nav>
Add the class collapse in
classes to your nav
element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse
as class and set the aria-expanded
to false
it will not be visible on mobile (but most likely also not in normal view).
<div class="container nbar collapse in" aria-expanded="true">
<ul class="nav nav-justified">
<!-- li's here -->
</ul>
</div>