1

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>

Robert
  • 25
  • 5

1 Answers1

0

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>
Niki van Stein
  • 10,564
  • 3
  • 29
  • 62