Problems with Navbar Collapse

Asked

Viewed 98 times

0

Oops, all right??? I’m having trouble doing the navbar Collapse, when I click on the icon does not appear the menu below.

Follow the code below:

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <a class="navbar-brand" href="">O Rei do Bojo</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarMenu">
            <span class="navbar-toggler-icon"></span>
          </button>  


        <div class="navbar-collapse collapse" id="navbarMenu">
          <ul class="navbar-nav">
            <li><a class="nav-item nav-link active" href="">Home</a></li>
            <li><a class="nav-link nav-link" href="">Sobre</a></li>
            <li><a class="nav-link nav-link" href="">Produtos</a></li>
            <li><a class="nav-link nav-link" href="">Contato</a></li>

          </ul>
        </div>

    </nav><!-- /navbar -->
</div>

And below follow the links to boostrap in Body and the js scripts.

<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery/bootstrap.bundle.min.js"></script>
collapse

1 answer

0


Good evening, it seems you forgot to enter the identifier on data-target="navbarMenu", how you’re using ID looks like this data-target="#navbarMenu".

Example:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <a class="navbar-brand" href="">O Rei do Bojo</a>

              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
                <span class="navbar-toggler-icon"></span>
              </button>  


            <div class="navbar-collapse collapse" id="navbarMenu">
              <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="">Home</a></li>
                <li><a class="nav-link nav-link" href="">Sobre</a></li>
                <li><a class="nav-link nav-link" href="">Produtos</a></li>
                <li><a class="nav-link nav-link" href="">Contato</a></li>

              </ul>
            </div>

        </nav><!-- /navbar -->
    </div>
</body>
</html>

  • Thanks for the reply, but I tested it here and it did not work.

  • Are you sure? test here and it worked. Make sure your scripts are being loaded correctly, jquery and CSS and JS bootstrap,

  • I just ran this script: if (window.jQuery == Undefined) Alert("No jQuery!"); and the return was No jquery.

  • There is your problem your links to the files are probably wrong. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Link to Jquery online.

  • Oops, I put the script making the request online here, and it didn’t work either. I’m already crazy about this kkkk .... The following: <script type="text/javascript" src="Assets/js/jquery/bootstrap.bundle.min.js"> </script> <script type="text/javascript" src="https://ajax.gooapigles.com/ajax/libs/jquery/3.3.1/jquery.min.js%22%3E%3E%3/script"></script script script>

  • I put an example working...

  • Thanks for the patience and especially the dedication in helping me!!! It worked, vlw!!!!!

Show 2 more comments

Browser other questions tagged collapse

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