jquery - Change menu to button on small devices -

so i'm new bootstrap. have checked site out came acros example on github: https://github.com/twbs/bootstrap/tree/master/docs/examples/dashboard

this little need. can tweak around little bit make work needs except one. there sidebar links. sidebar disapears when make screen smaller (as have happened on mobile devices). want make sure sidebar disapears have button. top navigation in example. here snippet code (not important assume)

<nav class="navbar navbar-inverse navbar-fixed-top">   <div class="container-fluid">     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">         <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="#">project name</a>     </div>     <div id="navbar" class="navbar-collapse collapse">       <ul class="nav navbar-nav navbar-right">         <li><a href="#">dashboard</a></li>         <li><a href="#">settings</a></li>         <li><a href="#">profile</a></li>         <li><a href="#">help</a></li>       </ul>       <form class="navbar-form navbar-right">         <input type="text" class="form-control" placeholder="search...">       </form>     </div>   </div> </nav>  <div class="container-fluid">   <div class="row">     <div class="col-sm-3 col-md-2 sidebar">       <ul class="nav nav-sidebar">         <li class="active"><a href="#">overview <span class="sr-only">(current)</span></a></li>         <li><a href="#">reports</a></li>         <li><a href="#">analytics</a></li>         <li><a href="#">export</a></li>       </ul>       <ul class="nav nav-sidebar">         <li><a href="">nav item</a></li>         <li><a href="">nav item again</a></li>         <li><a href="">one more nav</a></li>         <li><a href="">another nav item</a></li>         <li><a href="">more navigation</a></li>       </ul>       <ul class="nav nav-sidebar">         <li><a href="">nav item again</a></li>         <li><a href="">one more nav</a></li>         <li><a href="">another nav item</a></li>       </ul>     </div> 

so <nav> hides on smaller devices , forms menu button

also side question, aria mean. have seen few aria-... classes not sure does/mean.

if want display or hide elements based on screen resolution can follows in css:

    @media (max-width: 767px) {       .nav-sidebar {         display: none;       }     }     @media (min-width: 767px) {       .nav-sidebar {         display: block;       }     } 

the code display elements belonging class nav-sidebar if width of screen @ least 767px.

you can find complete example of trying here: http://bootsnipp.com/snippets/featured/responsive-navigation-menu