Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Html

Bootstrap Navbar On Mobile Not Working

Post a Comment
I'm making a site for my club in school (Brazil) and I'd like to know how to fix the issue in my site on mobile. The three lines in mobile when pressed don't do anything.

Solution 1:

Hi refers to Bootstrap Documentation.

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

You need to add these lines into your page in order to work.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

I used Bootstrap 4 Editor and copied your code in and it works perfectly, because the editor has built-in bootstrap javascripts.


Solution 2:

You have to add jquery and bootstrap js before closing the body to get the working toggle.

Note: The order is important here, put the jquery js link first and then bootstrap js.

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

  <title>ClubeDiversidade</title>
</head>
<style>
  body {
    background-color: orange;
  }
</style>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Clube da diversidade</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Inscrição</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="sobrenatural.html">Sobrenatural</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tecnologia</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Outras atividades</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <center>Bem-vindo!!</center>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>

</html>

Post a Comment for "Bootstrap Navbar On Mobile Not Working"