Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

O menu responsivo abre mas não fecha

Boa noite galera !

Então, estou fazendo o curso e durante os testes da navbar quando eu coloco no responsivo e clico ele funciona para eu ver os sub-menus, porém quando clico para fechar ele não fecha. Oque pode ser ?

6 respostas

Fala ai Renato, tudo bem? Como está a implementação do menu? Você utilizou o nativo do Bootstrap? Ao clicar na parte preta ele não fecha o menu?

Está dando algum erro de JavaScript?

Espero ter ajudado.

Fala Matheus, boa noite !

Cara, criei um index.html coloquei os links do bootstrap e o código da navbar, apenas isso, vou colocar abaixo o código para você poder me orientar.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">fruta e fruto</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Início</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Receitas</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Quem somos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

Pessoal, estou refazendo a parte da navbar porque fiquei com a pulga atras da orelha, estava usando a versão mais nova do bootstrap então coloquei para a versão que está apresentada no curso e funcionou normalmente. Será que e esse o problema ?

solução!

Fala ai Renato, olhando os links das CDNs que você está importando, são versões do Bootstrap 5 ainda em versão beta.

O problema é esse, quando você mudou para a versão do curso (4) compatível com o template o mesmo foi resolvido.

Isso porque com a versão 5 pode ter breaking changes e mudanças em relação as marcações de template.

Espero ter ajudado.

Valeu Matheus e obrigado pala explicação !

=)

Magina Renato, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software