Bom dia, preciso de uma ajuda de vcs.
Criei uma navBar com o Hamburguer com objetivo de ao clicar fazer descer uma div, e no entanto ao clicar o menu aparece e fica em cima da caixa da div sobrepondo.
Alguém já passou por isso.
Segue o código 
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar header">
<button id="botao" 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 id="collapse-navBar" class="collapse navbar-collapse" >
<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">Depoimentos</a></li>
<li><a href="#video-institucional">Vídeo Institucional</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
<div class="topCasaFina-banner">
<h1> Top Casa Fina Arquitetura</h1>
<p> Projetando a casa dos sonhos desde de 200 a.c</p>
<button class="btn btn-primary btn-lg" type="submit">Contate-nos agora</button>
</div>
</header>
Segue o css usado para isso:
$('#collapse-navBar').on('show.bs.collapse', function() {
alert('vc clicou no banner');
$('.topCasaFina-banner').css('transform', 'translate(-50%, 10%');
});
$('#collapse-navBar').on('hide.bs.collapse', function() {
$('.topCasaFina-banner').css('transform', 'translate(-50%, -50%');
});
Desde já agradeço a atenção de todos.