Bootstrap nav header menu collapse on mobile device

Question

Due to class="collapse navbar-collapse" (is my assumption correct?) my menu is hiding when using an device with an smaller screen.

But how to get some kind of button the user is able to select any item of this menu?

JSFiddle

Answer 1

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Klanttevredenheid</a></li> <li><a href="#">Leveranciersbeoord.</a></li> <li><a href="#">Afwijkingen.</a></li> <li><a href="toolbox.php">Toolboxen</a></li> <li><a href="werkplek.php">Werkplekinspec.</a></li> <li><a href="#">Ongevallen</a></li> <li><a href="#">Functioneringsgesprekken</a></li> <li><a href="#">Verbeterpunten</a></li> </ul> <form class="navbar-form navbar-right" action="" method="get"> <div class="form-group"> <input type="text" class="form-control" placeholder="Zoeken op" name="zoek" value="zoek" > </div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> 

you have miss this nav button control

 <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

I updated your fiddle check here

Answer 2

Just replace following

<div class="navbar-header">
<a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a>
</div>

with this

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a>
    </div>