0

Opa, tudo bem??? Estou com problemas ao fazer o navbar collapse, qdo clico no ícone não aparece o menu abaixo.

Segue abaixo o código:

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <a class="navbar-brand" href="">O Rei do Bojo</a>

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


        <div class="navbar-collapse collapse" id="navbarMenu">
          <ul class="navbar-nav">
            <li><a class="nav-item nav-link active" href="">Home</a></li>
            <li><a class="nav-link nav-link" href="">Sobre</a></li>
            <li><a class="nav-link nav-link" href="">Produtos</a></li>
            <li><a class="nav-link nav-link" href="">Contato</a></li>

          </ul>
        </div>

    </nav><!-- /navbar -->
</div>

E abaixo segue os links referências para boostrap no Body e os scripts do js.

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

<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery/bootstrap.bundle.min.js"></script>

1 Resposta 1

0

Boa noite, parece que você esqueceu de informar o identificador no data-target="navbarMenu", como você esta usando ID fica assim data-target="#navbarMenu".

Exemplo:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <a class="navbar-brand" href="">O Rei do Bojo</a>

              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
                <span class="navbar-toggler-icon"></span>
              </button>  


            <div class="navbar-collapse collapse" id="navbarMenu">
              <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="">Home</a></li>
                <li><a class="nav-link nav-link" href="">Sobre</a></li>
                <li><a class="nav-link nav-link" href="">Produtos</a></li>
                <li><a class="nav-link nav-link" href="">Contato</a></li>

              </ul>
            </div>

        </nav><!-- /navbar -->
    </div>
</body>
</html>
7
  • Obrigado pela resposta, porém testei aqui e não deu certo.
    – RafaSEP
    Commented 25/03/2019 às 1:44
  • Tem certeza? teste aqui e funcionou. Verifique se seus scripts estão sendo carregados corretamente, jquery e bootstrap CSS e JS,
    – brunox99x
    Commented 25/03/2019 às 1:48
  • Acabei de rodar esse script: if (window.jQuery == undefined) alert("Sem jQuery!"); e o retorno foi Sem jquery.
    – RafaSEP
    Commented 25/03/2019 às 1:58
  • Ai esta seu problema seus links para os arquivos provavelmente estão errados. <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…> Link para o Jquery online.
    – brunox99x
    Commented 25/03/2019 às 2:01
  • Opa, coloquei o script fazendo a requisição on line aqui, e também não funcionou. Já estou maluco com isso kkkk ..... Segue abaixo: <script type="text/javascript" src="assets/js/jquery/bootstrap.bundle.min.js"> </script> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…>
    – RafaSEP
    Commented 25/03/2019 às 2:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .