Bootstrap Responsive Navbar is not working!

Asked

Viewed 739 times

0

<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>
twitter-bootstrap bootstrap-4 responsive nav-bar

  • Which version of Bootstrap?

  • It is version 4.1 !

1 answer

2


Your problem is that you put a reference to data-target="#navbarNav" other than ID that you used on the <div class="collapse navbar-collapse" id="navbarSupportedContent">

Note that by placing the same value navbarNav in the ID of div id="navbarNav" your nav will start working.

Follow 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>

  • Thank you very much, my dear!

  • @Felipealves cool young that good that worked there. And beware of these names... Because they always have some rss purpose. Be sure to check the documentation! A tip. When asking here on Stackoverflow, besides the tb code put some more detail, about your problem. type: "My menu is not opening when I click the button" or something like that helps you answer. Good luck there!

  • 1

    can leave, I will be more attentive, it was my first post on the site. I thank you for your attention. thank you

Browser other questions tagged twitter-bootstrap bootstrap-4 responsive nav-bar

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