Button "hamburger" does not work

Asked

Viewed 871 times

0

Can anyone tell me why the button is not working? It was meant to show by clicking on it, but for some reason nothing is happening. ( Using the class "Collapse navbar-Collapse" I managed to do what I wanted, the menu, stay hidden, but when calling with the button, it just doesn’t 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>
<script href="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>
html css bootstrap-3

  • Just to confirm, the bootstrap was included correctly, right? Javascript and all?

  • 1

    Did you include jQuery as well? In order, first jquery.js after bootstrap.js?

  • Look, it does, but I’ll run the lines for you to check, this below is inside the <head>

  • Include in the question the <head> for better visualization

2 answers

4


Have two problems, bootstrap order and jquery 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>
<link href="CSS-projeto.css" rel="stylesheet" type="text/css">

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

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

This would be right:

<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>

<!-- depois vem o bootstrap.js -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="CSS-projeto.css" rel="stylesheet" type="text/css">

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

2

The problem is that in your code jQuery is included after 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>

I noticed that below the code I mentioned, there is another inclusion of bootstrap. If you include bootstrap more than once in the code, you’ll have even more problems.

Of official documentation of bootstrap:

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 that jQuery should be included before plugin files)". In your case, plugins must be part of the file with the bootstrap minified.

Fixing the insertion of the files should solve your problem.

  • Look, I updated the post with the tips they gave in the post, but the button still doesn’t work :(

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.