How to make the menu work in bootstrap responsive mode

Question

Here is the code placed for when resize the browser to be able to appear the responsive site as the menu does not appear when clicking does nothing

<div class="col-md-12">
      <div class="menu">
        <nav class="navbar">
          <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header"> 
            <a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            </a> </div>
          </div>
          <div class="col-lg-12 visible-lg ">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
              <ul class="nav navbar-nav" id="menu">
                <li><a href="#">INICIO</a></li>
                <li><a href="#">SOBRE</a></li>
                <li><a href="#">DADOS</a></li>
                <li class="active"><a href="#">APLICAÇÃO</a></li>
                <li><a href="#">PROGRAMADORES</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACTO</a></li>
              </ul>
            </div>
            <!-- /.navbar-collapse --> 
          </div>
        </nav>
      </div>
    </div>

Answer 1

From what I understand you need a bootstrap menu, so I made the following example:

http://jsfiddle.net/jaketaylor/84mqazgq/

The code is this:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
        <a href="#" class="hidden-xs">Home</a>
        <a href="#" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
        </li>
                <li>
        <a href="#products" class="hidden-xs">Products</a>
        <a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
        </li>
        <li>
        <a href="#overview" class="hidden-xs">Overview</a>
        <a href="#overview" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Overview</a>
        </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>

You can replace with your code, it is necessary to also insert the bootstrap for use in your project so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

You can read more here: http://getbootstrap.com.br/components/#dropdowns