Collapsed menu after selection

Asked

Viewed 191 times

0

I’m having doubts in the collapsing menu of bootstrap 4.1, when the layout is on smaller screen and collapsed, after selecting an option it does not collapse again, does anyone know how to do to solve this? I appreciate the help!

<!-- Carrega Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Font Awesome -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Carrega Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">



<body>

  <!-- Início Menu NAVBAR -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="img/header/logo.png" alt="Logo" class="d-none d-md-inline-block">
        <img src="img/header/logo-mini.png" alt="Logo-mini" class="d-md-none"></a>
      <div class="d-lg-none">
        <!-- Início Botão Menu Colapsado -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <!-- Fim Botão Menu Colapsado -->
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="nav navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Downloads</a>
          </li>
          <span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="bottom" title="Em breve">
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Loja Virtual</a>
            </li>
          </span>
          <li class="nav-item">
            <a class="nav-link" href="#contato">Contato</a>
          </li>
        </ul>
        <!-- Início redes sociais -->
        <span class="navbar-text">
          <a href="#"><i class="fa fa-facebook-square" aria-hidden-"true"></i></a>
          <a href="#"><i class="fa fa-instagram" aria-hidden-"true"></i></a>
          <a href="#"><i class="fa fa-linkedin" aria-hidden-"true"></i></a>
          <a href="#"><i class="fa fa-twitter" aria-hidden-"true"></i></a>
        </span>
        <!-- Fim redes sociais -->
      </div>
    </div>
  </nav>
  <!-- Fim Menu NAVBAR -->
  <!-- Bootstrap core JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

html twitter-bootstrap menu

  • Friend, I could not reproduce the problem you reported. Do new tests to check if it is not something with your browser for example.

1 answer

0

You must put a real destination to the links. When placing href="#" you do not leave the page and the menu does not collect.

Browser other questions tagged html twitter-bootstrap menu

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