CODEWITHSUNDEEP
htmltwitter-bootstrap
Casey
Casey

Reputation: 121

bootstrap 4.3.1 navbar not collapsing on link click

I apologize in advice for being another bootstrap navbar question but I could not find a solution in the questions already answered on here.

Thank you for your help in advance.

Using bootstrap 4.1.3.

Problem: Navbar not collapsing on link click.

The following is a link which is inside of the <head> tag (placed before the style.css, if the matters):

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

And here are two scripts placed just before the </body> tag:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

This is my navbar code:

<nav class="navbar navbar-expand-md navbar-light fixed-top">
  <a class="navbar-brand" href="#">Brand</a>
  <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 class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#reviews">Reviews</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 0

Views: 4170

Answers (1)

Jonny
Jonny

Reputation: 1293

EDIT:

I see what you're saying now:

Bootstrap has attributes to be applied to the tags in order for the functionality to work correctly on the navbar.

The attributes needed are the data-toggle and data-target attributes.

Change your 'a' tags to look like this:

        <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#reviews">Reviews</a>

working jsfiddle: https://jsfiddle.net/e6cfL9m0/

This question has actually already been answered here: How to hide collapsible Bootstrap 4 navbar on click

Upvotes: 2

Related Questions