Menu responsivo não fecha depois do clique

[carlaborginha 0]

Oi, pessoal!

 

Estou com um problema em um site que estou tentando desenvolver. Quando clico em algum item/ link constido dentro do meu menu responsivo, ele não fecha automaticamente após o clique, mas eu gostaria que isso acontecesse. Alguém consegue me ajudar?

Agradeço muito.

Segue parte do código:

<header id="header">
        <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
            <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                  </button>
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""/></a>
                </div>
				
                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="scroll active"><a href="#home">Home</a></li>
                        <li class="scroll"><a href="#proposta">Proposta</a></li>
                          <li class="scroll"><a href="#beneficios">Diferenciais</a></li> 
                        <li class="scroll"><a href="#escolas">Escolas</a></li>                                          
                      
                         <li class="scroll"><a href="#services">Produtos</a></li> 
                                            
                        <li class="scroll"><a href="#get-in-touch">Contato</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav><!--/nav-->
    </header><!--/header-->

[L. Henrique 179]

Carlaborginha,

Para a sua dúvida, você pode resolver isso utilizando jQuery em um evento collapse do próprio bootstrap.

Ex.:

$('.navbar-nav li a').click(function() {
   if ( !$(this).parent().hasClass('dropdown')) {
      $('.navbar-collapse').collapse('hide'); 
   }
});

Você pode conferir esse código funcionando com o seu próprio HTML aqui no JSFiddle.