Bootstrap navbar close

Asked

Viewed 1,884 times

1

Hello, I am using bootstrap version 4.0 beta-2, and I have a question, how do I close the navbar menu after clicking on a list item? By default you need to click on the item and click again in the menu to close.

I found a solution for this on the Internet, but it was all using old versions of Bootstrap, and apparently it doesn’t work on my.o'.

code 

   <nav class="navbar navbar-expand-lg navbar-dark bg-default">
     <span class="navbar-brand" align = "center">
       <h2 class = "font-weight-light text-justify"><em>A s t r o </em> mania</h2>
     </span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarText">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
             <a class="nav-link" href="#Inicio">Home<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Pricing</a>
         </li>   
       </ul>
       <span class="navbar-text" align = "center">
           O melhor counteúdo de astronomia você encontra aqui no <em>A s t r o</em> mania.
       </span>
     </div> 
   </nav>
html5 twitter-bootstrap menu dropdown nav-bar

  • Note: This is when it is on smaller screens, when it adapts to smaller screens and the Nav-bar menu "icon" appears...

  • 1

    When you click on an item in the menu, it does not refresh the page?

  • No, do not reload, it just directs to the link target... and the target is on the page itself, so it just redirects to the content and does not close the menu alone...

  • Seeing the first link in the list the "Start", my idea was to leave fixed this navbar, and when the user was browsing down and wanted to go back up, just click on the menu, and click on the "Start". The problem is that after clikcar it does not close alone

  • See if the answer helped.

1 answer

2


In Bootstrap 4 (as specified in the question, but should work in recent previous versions) the menu will be closed by clicking on an item in the menu list, with the following jQuery listener:

$(".nav-link").on("click", function(){
   $('.navbar-collapse').collapse('hide');
});


$(".nav-link").on("click", function(){
   $('.navbar-collapse').collapse('hide');
});
html, body, nav{ background: #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-default">
  <span class="navbar-brand" align = "center">
    <h2 class = "font-weight-light text-justify"><em>A s t r o </em> mania</h2>
  </span>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a class="nav-link" href="#Inicio">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
      </li>   
    </ul>
    <span class="navbar-text" align = "center">
        O melhor counteúdo de astronomia você encontra aqui no <em>A s t r o</em> mania.
    </span>
  </div> 
</nav>

Browser other questions tagged html5 twitter-bootstrap menu dropdown nav-bar

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