Problema con menu

[sergiodueso]

Os pongo de nuevo el código. No encuentro solución. Gracias

Código Javascript:

$(document).ready(function(){
    $(".navbar-nav li a").click(function () {
            $('.navbar-toggler').click();
             
    });
});
 

Y ahora el menú

Código HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  <a data-scroll class="navbar-brand" href="#inicio">
  <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto text-center">
      <li class="nav-item active">
        <a data-scroll class="nav-link" href="#inicio" id="inicio">Inicio</span></a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#galeria">Galería</a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#contacto">Contacto</a>
      </li>
    </ul>
  </div>
</nav>