Hide navbar when item is clicked

Question

I am developing a site whose menu is the dropdown navbar of bootstrap 4. When I view the site on a smaller screen, the Nav is replaced by the burger button and is only "activated" when this button is clicked. However, I want it to be "disabled" when any menu item is clicked. For example, if I click on "Contact", in addition to the screen scroll to the contact part, I want the menu to go up and just stay the button up there.

<header>
  <nav id="menu" class="navbar navbar-expand-lg">
    <img id="icone" src="imgs/logoBranca.png" height="35" alt="Logo da Clara Quitutes & Cia">
    <a id="nome" class="navbar-brand" href="#">Clara Quitutes & Cia</a>
    <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#inicio">Início</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Serviços</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="servicos.html#bolos">Bolos</a>
            <a class="dropdown-item" href="servicos.html#salgados">Salgados</a>
            <a class="dropdown-item" href="servicos.html#bebidas">Bebidas</a>
            <a class="dropdown-item" href="servicos.html#docinhos">Docinhos</a>
            <a class="dropdown-item" href="servicos.html#quitutes">Quitutes</a>
            <a class="dropdown-item" href="servicos.html#empratados">Empratados</a>
            <a class="dropdown-item" href="servicos.html#opcoes-saudaveis">Opções Saudáveis</a>
            <a class="dropdown-item" href="#">Garçonete/Copeira</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contato">Contato</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sobre">Sobre</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

I tried using this function in JS (found in Github), but it didn’t work. What’s wrong with the code?

//Função para o menu subir quando um item for clicado
  $(document).ready(function(){
    $(".navbar-nav li.-collapse a").click(function(event){
      $(".navbar-collapse").collapse('hide');
    });
  });

Is there any other way I can do this? I am not using jQuery in the project and would not like to use only for this because it is too heavy, so preferably that the solution suggestion can be developed in JS or even CSS. I want the following:

Menu without clicks

Menu when I click on the burger

Then, when I click on any list item (in this case, "home", "users" or "Places"), the menu goes back to this way:

Answer 1

Just shoot a trigger .click() on the burger button when a link is clicked, except the one that has only one # in the href, because this link opens a dropdown submenu, not an anchor (e.g. the link "Services").

For this you select all the links in the menu, EXCEPT the one that has only the # in the href using the pseudo-class :not, and creates an event click for each one. Clicking on any of them will trigger the trigger .click() on the button, making the menu close:

document.addEventListener("DOMContentLoaded", function(){
   var links = document.querySelectorAll(".navbar-nav li a:not([href='#'])");
   for(var x=0; x<links.length; x++){
      links[x].onclick = function(){
         document.querySelector("button.navbar-toggler").click();
      }
   }
});

Example:

document.addEventListener("DOMContentLoaded", function(){
   var links = document.querySelectorAll(".navbar-nav li a:not([href='#'])");
   for(var x=0; x<links.length; x++){
      links[x].onclick = function(){
         document.querySelector("button.navbar-toggler").click();
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<header>
  Abra o menu e clique, por exemplo, em "Contato":
  <nav id="menu" class="navbar navbar-expand-lg navbar-light">
    <a id="nome" class="navbar-brand" href="#">Clara Quitutes & Cia</a>
    <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#inicio">Início</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Serviços</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="servicos.html#bolos">Bolos</a>
            <a class="dropdown-item" href="servicos.html#salgados">Salgados</a>
            <a class="dropdown-item" href="servicos.html#bebidas">Bebidas</a>
            <a class="dropdown-item" href="servicos.html#docinhos">Docinhos</a>
            <a class="dropdown-item" href="servicos.html#quitutes">Quitutes</a>
            <a class="dropdown-item" href="servicos.html#empratados">Empratados</a>
            <a class="dropdown-item" href="servicos.html#opcoes-saudaveis">Opções Saudáveis</a>
            <a class="dropdown-item" href="#">Garçonete/Copeira</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contato">Contato</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sobre">Sobre</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="contato">
   contato
</div>

Now, your jQuery doesn’t work because your selector is incorrect:

".navbar-nav li.-collapse a"

Should be:

".navbar-nav li a"

Answer 2

Use it so it works perfectly, in case anyone else has this problem. Hug.

jQuery(document).ready(function() {
    jQuery(".navbar-nav li a").click(function(event) {
        event.preventDefault();
        jQuery(".navbar-collapse").collapse('hide');
    });
});

Answer 3

To hide you can use the following code `

$('id ou class do navbar').hide()

`

Answer 4

Congratulations to me worked out that way

// Hide Menu
var hideMenu = function() {

    document.addEventListener("DOMContentLoaded", function(){
       var links = document.querySelectorAll(".navbar-nav li a:not([href='#'])");
       for(var x=0; x<links.length; x++){
          links[x].onclick = function(){
             document.querySelector("button.navbar-toggler").click();
          }
       }
    });

};
hideMenu();