How do I get the toggle menu to close when clicking and take me to the beginning of the section correctly?

Question

When I add the code below, the menu even closes when I click, but that doesn’t get me to the starting point of Section. This takes me a few pixels down, unlike what happens in my original code without adding the script.

script in question:

$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});

Could someone show me where I’m going wrong? How do I close the toggle menu on mobile by clicking and descending correctly to the beginning of the section and not a few pixels down. The correct behavior happens without this code that closes the menu when clicking, but I would like to have a menu that closes automatically when clicking. Someone gives a light?

MY ORIGINAL CODE WORKING: https://www.codeply.com/go/gD2F6iVFm0

CODE WITH PROBLEM: https://www.codeply.com/go/eIKdPVCBih

Gif with the problem below - at the end of the click, I show him where he takes me and then I go up to the place I’d like him to take me.

<blockquote class="imgur-embed-pub" lang="en" data-id="a/S2FZwJL" data-context="false" ><a href="//imgur.com/a/S2FZwJL"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

Answer 1

Close Ollapse in the same event that makes the animation, before the animation:

$('a[href*="#"]:not([href="#"])').click(function() {
  $('.navbar-collapse').collapse('hide'); // AQUI!!!
  var target = $(this.hash)
  $('html, body').animate({
    scrollTop: target.offset().top-60
  }, 900)
})

And remove the excerpt from the script you made:

$('.navbar-nav>li>a').on('click', function(){
   $('.navbar-collapse').collapse('hide');
});