Responsive bootstrap menu does not close when clicking

Asked

Viewed 1,412 times

2

I would like to know why the bootstrap menu on mobile devices does not close when clicking on the menu. It opens normally, but if the user wants to close, it does not close.

Access link: www.paddock.eco.br

Menu Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav id="topNav" class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>  
       </div>
       <div class="navbar-collapse collapse" id="bs-navbar">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVIÇOS <span class="caret"></span></a>
    	      <ul class="dropdown-menu">
    		<li><a href="#one">Detalhamento Automotivo</a></li>
    		<li><a href="#two">Polimento Paddock</a></li>
    		<li><a href="#three">Pacotes Carro</a></li>
    		<li><a href="#four">Pacotes Moto</a></li> 
              </ul>
    	   </li>
           <li>
              <a class="page-scroll" href="#last">Contatos</a>
           </li>
         </ul>
       </div>
     </div>
  </nav>

html css bootstrap-3 menu

  • 1° part of the menu above the one I posted above. <nav id="topNav" class="navbar navbar-default navbar-fixed-top">&#xA; <div class="container-fluid">&#xA; <div class="navbar-header">&#xA; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>

  • You can edit your reply and put that code in your comment...

  • 1

    What version of jQuery are you using? Actually the class toggle navbar-collapse collapse in in the element bs-navbar seems to be bug - the class collapse in does not maintain the change to collapse out.

  • Sets the data-target to data-target=". Collapse" and can delete id="Bs-navbar"

  • @Renanbessa edit your question and put as answer along with the code to have an easy understanding.

1 answer

0

look this error if give because of bootstrap version and JS version use the requested version in the documentation and not q vc already have in your project 

<!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
<!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Hello, world!

<!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
<script src="js/bootstrap.min.js"></script>

Browser other questions tagged html css bootstrap-3 menu

You are not signed in. Login or sign up in order to post.