How can I give that space of the navbar when activating the scroll, so that it is not above the beginning of the section to which the button directs me?
What I try is that the height of the navbar is considered by the scroll and that the section to which I am directed starts after the navbar.
In the snipet there is only the JS code that executes the scroll, the css styles of the navbar and the navbar made with bootstrap, please help me since I can't find a solution anywhere.
This is the test link of the site, by clicking on the menu buttons you can see what I mention
https://skironghost.github.io/jm_montages/#gallery
Thanks.
$('a[href^="#"]').click(function() {
var destino = $(this.hash);
if (destino.length == 0) {
destino = $('a[name="' + this.hash.substr(1) + '"]');
}
if (destino.length == 0) {
destino = $('html');
}
$('html, body').animate({ scrollTop: destino.offset().top }, 1500);
return false;
});
.navbar{
background-color: #282424 !important;
padding: 0 15px;
}
.navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 192, 5, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .collapse a{
color: #E9DADA !important;
padding: 12px;
}
.navbar .collapse a:hover{
background-color: #FFCD38;
color: #282424 !important;
}
.navbar .collapse a:active{
background-color: #FFC005;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse p-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicios">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#clientes">Clientes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#galeria">Galería</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</nav>