Button "hamburger" does not work

0

Can anyone tell me why the button is not working? It was for him to show by clicking on it, but for some reason nothing is happening. :( Using the "collapse navbar-collapse" class I was able to do what I wanted, the menu, to stay hidden, but at the time of the button call, it just does not work.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scripthref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<link href="CSS-projeto.css" rel="stylesheet" type="text/css">

<div id="pai" class="row">
  <div class="col-xs-12 col-xs-10">
    <div class="menu">
      <nav>
        <div class="navbar-default" id="navbardefault-cor">
          <div class="container-fluid">
            <img class="img-responsive" id="imagemBBlogo2"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo">
            <button id="botaoPosicao" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>
            </button>

            <div class="collapse navbar-collapse" id="navbar-collapse">
              <ul id="menu" class="nav navbar-nav">
                <li class="LogoPosicao">  <img class="img-responsive" id="imagemBBlogo"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
                <li><a class="Entenda" href="#">ENTENDA</a></li>
                <li><a class="SemJuros" href="#">SEM JUROS</a></li>
                <li><a class="Quebra">|</a></li>
                <li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
                <li id="contatoLI"><a class="Contato" href="#Contato-Site" button  type="button"  data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>
    
asked by anonymous 30.05.2017 / 18:16

2 answers

4

There are two problems, the order of the bootstrap and jquery is wrong:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script href="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><linkhref="CSS-projeto.css" rel="stylesheet" type="text/css">

And you used href= inside script when the correct one should be src= :

<script href="bootstrap/js/bootstrap.min.js"

The correct one would be this:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- primeiro o jquery.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--depoisvemobootstrap.js--><scriptsrc="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="CSS-projeto.css" rel="stylesheet" type="text/css">

Another detail is missing the <body></body> tag, but does not affect execution

    
30.05.2017 / 18:30
2

The problem is that in your code jQuery is included after the bootstrap.

<script href="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

InoticedthatfurtherdownthecodeImentioned,thereisanotherbootstrapinclusion.Ifyouincludethebootstrapmorethanonceinthecode,you'llstillhavemoreproblems.

Fromthe official bootstrap documentation :

  

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files)

"Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files)". In your case, the plugins should be part of the file with the mini-bootstrap.

Correcting file insertion should solve your problem.

    
30.05.2017 / 18:33