Bootstrap Navbar not functional

Asked

Viewed 1,192 times

1

I already copied according to the Bootstrap documentation but my navbar is not working properly when I lower the screen. The button appears normal, but when I click, it should open a menu with the options of my "Nav-content" but nothing happens when I click the button. I’ve checked it over and over again, I don’t think I’ve ever?

Tela Cheia

Tela Diminuida

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css">

    <!-- CSS Personalizada -->
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <!-- Ícone da Página na aba -->
    <link rel="icon" href="imagens/bonfireicon.png">

    <title>Weeeelcome!</title>

</head>
<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-md navbar-light bg-faded">
        <a class="navbar-brand" href="#">Company</a>
        <!-- Hide Button -->
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content"
        aria-expanded="false" aria-label="Toogle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- NavBar Content -->
        <div class=" collapse navbar-collapse" id="nav-content">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Serviços</a>
                </li>
            </ul>
            <!--Search Box -->
            <form class="form-inline my-2 my my-lg-0">
                <input type="text" class="form-control mr-sm-2" placeholder="Digite sua pesquisa aqui..." aria-label="Search">
                <button type="submit" class="btn btn-outline-success">Pesquisar</button>
            </form>
        </div>
    </nav>


    <div class="container">

        <div class="starter-template">
            <h1 class="">What up!</h1>
            <p class="lead">Bonfire lit.</p>
        </div>

    </div>


    <!-- Bootstrap JS -->
    <script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
css bootstrap

  • What would not work properly? What you need the NAV to do ?

  • I need that when I resize it to a small size, the contents of the "Nav-item" be grouped in the button I created, so that in a cell phone, I can maintain a good visualization. But when I click the button (second image) nothing happens. And according to the Bootstrap documentation should already work.

1 answer

1


First Jquery, then bootstrap.

If you look at the developer console, you will notice the error:

Uncaught Error: Bootstrap’s Javascript requires jQuery

Then change:

<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

For:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.js"></script>

  • That you said is correct for jQuery interaction Apis and DOM elements for Bootstrap, but for responsiveness shouldn’t be the problem, since it is possible to use bootstrap.css without jQuery.

  • @Guilhermenascimento makes a little bit of sense, however I didn’t even download his code to do the test, I realized this problem (I already went through it), the menu (navbar) was fine, but when it was responsive (small) on a smaller device, It didn’t work, so I researched for days, until I saw that was the problem.. kkkk The question that won’t shut up, did your code work there? (If it didn’t work, make your project available to have access to all the css and js files that you are using) Then I can help you more :)

  • 1

    Caaaaaaaaaara! Thank you very much! I didn’t know I should put Jquery before Javascript. It worked after I changed it as you indicated. Thank you very much. :D

Browser other questions tagged css bootstrap

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