como previamente te han comentado puedes usar un evento collapse en bootstrap. Yo intenté otra forma combinando bootstrap y estilos basándome en el proyecto siguiente: https://codepen.io/ncerminara/pen/hmade/ cantado sería de la siguiente manera, tienes que agregar las clases, a prestar atención:
.push-wrap {
-webkit-transition: all 300ms ease 0ms;
-moz-transition: all 300ms ease 0ms;
-o-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.show-nav .push-wrap {
-webkit-transform: translate(0, 240px);
-moz-transform: translate(0, 240px);
-ms-transform: translate(0, 240px);
-o-transform: translate(0, 240px);
transform: translate(0, 240px);
-webkit-transform: translate3d(0, 240px, 0);
-moz-transform: translate3d(0, 240px, 0);
-ms-transform: translate3d(0, 240px, 0);
-o-transform: translate3d(0, 240px, 0);
transform: translate3d(0, 240px, 0);
}
El evento:
$(function() {
$('.toggle-nav').click(function() {
$('body').toggleClass('show-nav');
return false;
});
});
// Toggle with hitting of ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('body').toggleClass('show-nav');
}
});
Siguiendo mi forma obtendríamos un resultado parecido al tuyo.
// Normal Clicks
$(function() {
$('.toggle-nav').click(function() {
$('body').toggleClass('show-nav');
return false;
});
});
// Toggle with hitting of ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('body').toggleClass('show-nav');
}
});
nav {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.site-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.push-wrap {
-webkit-transition: all 300ms ease 0ms;
-moz-transition: all 300ms ease 0ms;
-o-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.show-nav .push-wrap {
-webkit-transform: translate(0, 240px);
-moz-transform: translate(0, 240px);
-ms-transform: translate(0, 240px);
-o-transform: translate(0, 240px);
transform: translate(0, 240px);
-webkit-transform: translate3d(0, 240px, 0);
-moz-transform: translate3d(0, 240px, 0);
-ms-transform: translate3d(0, 240px, 0);
-o-transform: translate3d(0, 240px, 0);
transform: translate3d(0, 240px, 0);
}
a {
transition: all 300ms ease;
}
nav {
background: white;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none !important;
height: 60px;
line-height: 60px;
font-size: 18px;
color: #000;
}
article {
position: relative;
min-height: 1500px;
background: white;
z-index: 9;
width: 100%;
}
article h1 {
text-align: center;
margin: 40px 0 30px;
}
article p {
font-size: 20px;
line-height: 30px;
margin-bottom: 40px;
}
article a.toggle-nav {
position: absolute;
font-size: 25px;
color: rgb(68, 71, 87);
top: 0;
right: 0;
background: #fff;
width: 60px;
height: 50px;
line-height: 50px;
text-align: center;
}
i {
color: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="site-wrap">
<nav class=" bg-light container-fluid sticky-top">
<ul>
<li><a href="#">¿Quiénes somos?</a></li>
<li><a href="#">¿Dónde estamos?</a></li>
<li><a href="#">Tratamiento</a></li>
<li><a href="#">Previa cita</a></li>
</ul>
</nav>
<div class="push-wrap">
<article>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">VITALDENT</a>
<a href="#" class="toggle-nav">
<i class="fa fa-bars"></i>
</a>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img
width="100%" src="https://cdn.pixabay.com/photo/2018/04/30/08/08/business-3362081_1280.jpg"
alt=""
/>
</div>
</div>
</div>
</article>
</div>
</div>
Espero haber sido de ayuda.
navbar-fixed-top
en BS3, ofixed-top
en BS4)