Boa tarde pessoal!
Estou acompanhando passo a passo o que o professor faz no código e, mesmo assim, minha coreção de bug do collapse em cima do banner não funcionou, como se não estivesse chamando o arquivo js. coloquei ele em script, já mudei de posição para teste e mesmo assim não surtiu efeito (descer o banner ao collapsar).
Podem me orientar? Segue meu código:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<meta name="description" content="Descrição do site">
<meta name="keywords" content="palavras,sepadadas,por,virgula">
<meta name="author" content="#">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="assets\bootstrap\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets\style.css">
<script src="assets\js\jquery.js"></script>
<script src="assets\bootstrap\js\bootstrap.min.js"></script>
<script src="assets\js\nav-fix.js"></script>
<title>#Top Casa Fina Arquitetura#</title>
</head>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar" 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>
<a class="navbar-brand" href="#">TopCasaFina Arquitetura</a>
</div>
<div class="collapse navbar-collapse" id="collapse-navbar">
<ul class="nav navbar-nav">
<li><a href="#sobre-nos">Sobre nós</a></li>
<li><a href="#nossos-projetos">Nossos projetos</a></li>
<li><a href="#depoimentos-clientes">Depoimentos de clientes</a></li>
<li><a href="#video">Vídeo institucional</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
<div class="top-banner">
<h1>TopCasaFina Arquitetura</h1>
<p>Projetando a casa dos sonhos desde 2016</p>
<button class="btn btn-primary btn-lg">Contate-nos agora</button>
</div>
</header>Abaixo o arquivo js que criei para correção:
$('#collapse-navbar').on('show.bs.collapse', function(){
$('.top-banner').css('transform', 'translate(-50%, 10%');
});
$('#collapse-navbar').on('hide.bs.collapse', function(){
$('.top-banner').css('transform', 'translate(-50%, -50%');
});