Bootstrap responsive Navbar is not working!

<html>
  <head>
    <meta charset="utf-8">
    <title>HARD PUNK - Strange, The Fish</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap.js"></script>
  </head>  

  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="./TheStrangerFish.html"><img src="./logo.png" height="50" width="50"  class="d-inline-block align-top" alt=""> HARD PUNK </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarN" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li><a class="nav-link" href="#">Sobre o Jogo</a></li>
            <li><a class="nav-link" href="#">Desenvolvedores</a></li>
            <li><a class="nav-link" href="#">Contato</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>  
</html>
Author: hugocsl, 2018-09-25
Source

1 answers

Your problem is that you put a reference of data-target="#navbarNav" different from the ID you used in <div class="collapse navbar-collapse" id="navbarSupportedContent">

Notice that by putting the same value navbarNav in ID of div id="navbarNav" Your Nav starts working.

Follows the model. I didn't change anything, I just fixed the target with the right ID.

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


    <header>
        <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="./TheStrangerFish.html"><img src="./logo.png" height="50" width="50" class="d-inline-block align-top"
                    alt=""> HARD PUNK </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarN"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
   

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li><a class="nav-link" href="#">Sobre o Jogo</a></li>
                    <li><a class="nav-link" href="#">Desenvolvedores</a></li>
                    <li><a class="nav-link" href="#">Contato</a></li>
                </ul>
            </div>
        </nav>
    </header>
 2
Author: hugocsl, 2018-09-25 15:37:12