Problema com o toggle do Bootstrap 4

31/08/2019

8

Olá, meu probleminha é simples. Tenho uma barra de menu que quando diminui o tamanho da tela ele vira aquele button com 3 tracinhos. Meu problema é que o toggle que faz aparecer o menu quando clica nos 3 tracinhos não aparece. Segue meu código:

<!doctype html>
<html lang="pt-BR">

<head>
<meta charset="utf-8">
<title>Grupo Musical Girassol</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="girassol.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.js"></script>
</head>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Girassol</a>

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

<div class="collapse navbar-collapse" id="navbarSite">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Músicas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Eventos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>

</ul>
</div>
</div>
</nav>
</header>
<body>
<!-- sessão 1 -->


<div class="inicio" name="abertura">
<div id = "inicio1">
<div id="grupomusical">Grupo Musical</div>
<div id="traco"></div>
<h1>Girassol.</h1>

</div>



<div id="inicio2">

</div>




</div>

<!-- sessão 2 -->

<div class="musicas">
<div class="linha">
<figure>
<p><img src="disco1.jpg" class="disco" style="width: 150px; height: 150px; border-radius: 50%;"></p>
<figcaption>A Caminho da Evolução (1º CD) </figcaption>
</figure>
<figure>
<p><img src="disco2.jpg" class="disco" style="width: 150px; height: 150px; border-radius: 50%;"></p>
<figcaption>Encontrei Jesus (2º CD) </figcaption>
</figure>
<figure>
<p><img src="disco3.jpg" class="disco" style="width: 150px; height: 150px; border-radius: 50%;"></p>
<figcaption> Nova Era (3º CD) </figcaption>
</figure>
<figure>
<p><img src="disco4.jpg" class="disco" style="width: 150px; height: 150px; border-radius: 50%;"></p>
<figcaption>Mundo de Luz (4º CD)</figcaption>
</figure>

</div>

<div class="caixademusica">
<h3>Baixe o álbum completo</h3>
<audio controls="controls">
<source src="15Alma%20divina.mp3" type="audio/mpeg"><source/>
<source src="15Alma%20divina.mp3" type="audio/mpeg"><source/>
</audio>
</div>


</div>




<!-- sessão 3 -->
<div class="agenda">
<h3 class="agend"> Próximos Eventos</h3>
<div data-aos="fade-up-left" data-aos-duration="2000" class="datas" id="quadro1">
<p>Onde: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <br/>
<p>Quando: <br/> Dia xx/xx/2019</p> <br/>
<p>Horário: <br/> 00:00h</p> <br/>
<p>Entrada Franca</p>

</div>
<div data-aos="fade-up-left" data-aos-duration="2000" class="datas" id="quadro2">
<p>Onde: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <br/>
<p>Quando: <br/> Dia xx/xx/2019</p> <br/>
<p>Horário: <br/> 00:00h</p> <br/>
<p>Entrada Franca</p>
</div>
<div data-aos="fade-up-left" data-aos-duration="2000" class="datas" id="quadro3">
<p>Onde: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <br/>
<p>Quando: <br/> Dia xx/xx/2019</p> <br/>
<p>Horário: <br/> 00:00h</p> <br/>
<p>Entrada Franca</p>
</div>
</div>

<!-- sessão 4 -->
<div class="contato">
<section class="content">
<div class="cont1">
<h3>Formulário de Contato</h3>
<form class="form" method="POST" action="./email.php">
<input class="field" name="name" placeholder="Nome">
<input class="field" name="email" placeholder="E-mail">
<textarea class="field" name="message" placeholder="Digite sua mensagem aqui..."></textarea>

<input type="submit" value="Enviar">
</form>
</div>
<div class="cont2">
<h3>Contato Direto</h3>
<p>Fone: (81) xxxxx-xxxxx</p>
<p>E-mail: xxxxxx@gmail.com</p>
<p> Tratar com Carlos Borges</p>
<p>Endereço: F.E.L.I.Z. (Fraternidade Espírita <br/>Lar Irmão Zaqueu) <br/>
Rua XXXXXXXXXXXXXXXX, nº xx, Cavaleiro <br/>
CEP: xxxxxxx- xx</p>
</div>
</section>
</div>

<footer>© Girassol</footer>

<!--<script src="abnt.js"></script>-->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>

</html>
Responder

Post mais votado

19/09/2019

Tenta importar o jQuery antes do Bootstrap nos arquivos JS
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar