Problema com o toggle do Bootstrap 4

31/08/2019

0

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

Gabriel

Responder

Post mais votado

19/09/2019

Tenta importar o jQuery antes do Bootstrap nos arquivos JS

Joao Nascimento

Joao Nascimento
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar