How to make the menu in bootstrap in the mobile version close when you click on an item from the menu?

Question

HTML

Single page site on Bootstrap. There is a standard menu. Fixed and not scrolling. Links are seen as anchors on the same page.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="sr-only">Меню</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
  <a class="navbar-brand" href="#">ЛОГО</a>		
  
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
  </ul>
  <ul class="nav navbar-nav navbar-right">
  <li><a href="#punkt1">punkt1</a></li>
  <li><a href="#punkt2">punkt2</a></li>
  <li><a href="#punkt3">punkt3</a></li>
  </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div>

In the mobile version, it has the following behavior:
Click on the "sandwich" menu.
The menu opens.
Click on any link.
The page scrolls to the anchor.
BUT the menu does not close =((((
PS: I will also say thank you if you tell me the following:
css is set

body {
padding-top: 50px;
}

Whatever the top of the site is under the menu. But when we navigate through the anchor, the anchor is obtained under the menu. How to fix it?

Answer 1

By clicking on the "sandwich", the block with the menu starts animation, and after it the in class is added . To hide the menu by pressing, it is enough to take the class, further work with the menu will be correct.
Regarding padding-top: 50px;
Or we create an anchor higher so that it hides under the menu, and the one we need is 50px lower. Or via js

<a href="#anchor" class="toAnchor">ссылка для перехода</a>
.........
<a id="anchor">якорь</a>

$('.toAnchor').on('click', function () {
  $a = $($(this).attr('href'));
  $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
  return false;
});

Answer 2

Alexander! Thank you so much! Managed to solve both problems. True, as a lamer, at first I thought that you just need to paste the code and everything will work) It turned out that you still need to understand what you are doing) In the first case, you need to delete the class exactly by clicking on the menu item, and the code fragment does not contain click processing ) And in the second case - a typo: instead of a dot '.' there is a sharp '#' in the code. Having added and corrected, I got a working code that solves both problems at once. Thank you very much again!

<script> 
        $('.toAnchor').on('click', function () {
           $('.navbar-collapse').removeClass('in');
           $a = $($(this).attr('href'));
           $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
         return false;
         });
   </script>

Answer 3

This helped me:

$(function(){ 
     var navMain = $(".navbar-collapse"); 
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Answer 4

this code will make panel hiding slow (animated):

$('.navbar-collapse').on('click', function () {
    $('.navbar-collapse').collapse('hide');
    $a = $($(this).attr('href'));
    $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
    return false;
});

Answer 5

For Bootstrap 4.3.1 - Working version.
When clicking on the link closes the menu and removes the dark background.

$('.nav-link').on('click', function () {
  $('.navbar').removeClass('open');
  $('.bg-overlay').removeClass('open1');
  $a = $($(this).attr('href'));
  $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
  return false;
});