NavBar on Mobile not Hiding once I click on selected target HTML CSS

Question

So I have a Nav bar on my website. It all works perfectly, except the nav bar when I am on mobile.

Basically whenever I click any href from my Nav Bar, it does send me to where that href is, but it does not close the nav bar after doing so. I need it to work this way: Right after I click on that href link on the Nav Bar, it sends me to that location, and then closes the nav bar, so it is not being in front of the content I am searching for. Here is a video example:

https://youtu.be/BWffD2Lew8w

Does anyone know how I can fix this? Here is the code I used for that section. Thanks a lot!

<nav class="navbar fixed-top navbar-expand-lg navbar-dark d-md-inline d-lg-none" id="navbarFunctions" style="background-color: #0f0f0f;">
        <div class="container-fluid">
          <a class="navbar-brand" href="#Inicio"><img src="navbar/LogoWhite.svg" width="200" height="50"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBtn" aria-controls="navbarBtn" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarBtn">
            <ul class="navbar-nav" style="font-size: 1.25rem;">
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Inicio">Inicio</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Beneficios">Beneficios</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Como_Funciona">¿Cómo funciona?</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Carta_Muestra">Carta Muestra</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Precios">Precios</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Contacto">Contacto</a>
                </li>
            </ul>
          </div>
        </div>
      </nav>

Answer 1

You have to call the function that close the menu when someone click on one of the links.

Example:

<a class="nav-link" onclick="closeNavbar()" href="#Beneficios">Beneficios</a>

Something like that...

Answer 2

Just add this toggler in every anchor tag of your navbar and you are good to go:

data-toggle="collapse" data-target="#navbarBtn"

like this

<li class="nav-item mx-2">
   <a class="nav-link" href="#Precios" data-toggle="collapse" data-target="#navbarBtn">Precios</a>
</li>

Answer 3

I had the same problem recently. I used Bootstrap 4 in my project and linked to jQuery in the bottom of my html as usual when using Bootstrap. I made it work this way:

Link to your javascript file in your html:

<script src="assets/js/main.js" ></script>

And then try to add this to your javascript file:

$(document).ready(function () {
    // When the user clicks on a link in the navbar on smaller screens the navbar 
       collapse.
    $('.navbar-nav a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });
});

Hope this works for you as well!

Answer 4

Just use this simple jQuery code:

<script>
    $(document).ready(function(){
        $(".nav-link, .navbar-brand").click(function(){
            $("#navbarBtn").collapse("hide");                   
        });    
    });
</script>