CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbootstrap-4
Seb W
Seb W

Reputation: 571

Bootstrap 4 navbar not collapsing on large screen

I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to toggle menu, nothing happens. The jsFiddle example demonstrates this behavior. I have attached the HTML as well.

Steps I have taken:

jsFiddle link https://jsfiddle.net/u7v5jba9/

<title>Site title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">

      <a class="navbar-brand" href="#">
        <i class="fa fa-globe" aria-hidden="true"></i> Brand Name
      </a>

      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-angle-double-down"></i>
              </button>

      <div class="navbar-collapse collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container">
    <nav class="navbar navbar-inverse fixed-bottom text-center">
      <h6 class="text-light text-center">Footer</h6>
    </nav>
  </div>

  <!-- Scripts -->
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>

Upvotes: 16

Views: 42063

Answers (4)

AKLI JOSHUA Eric Yao
AKLI JOSHUA Eric Yao

Reputation: 1

This might be helpful ...Since Bootstrap 5 there is a slight change in how collapse works... see code `

 <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">DATA STRUCTURES &amp; ALGORITHMS JS</button>
<div class="collapse" id="collapseExample" >
  <form class="form-inline" id="form">
 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>

Upvotes: 0

smoore4
smoore4

Reputation: 4866

You can also change the bootstrap reference to the bundled version - bootstrap.bundle.min.js - which includes popper.js.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Fiddle: https://jsfiddle.net/smoore4/m2dLp71q/

As @Anand Rockzz correctly points out, you still need to add jQuery before this reference.

Upvotes: 4

abhi varshi
abhi varshi

Reputation: 21

This happens when you miss the order of scripts. You should always include scripts in this order

  1. jquery.js
  2. popper.js
  3. bootstrap.js
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Upvotes: 2

ProEvilz
ProEvilz

Reputation: 5455

You need to include Popper as per the Getting Started Docs.

Use these for your scripts instead.

<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Updated working Fiddle: https://jsfiddle.net/u7v5jba9/1/

Advice: In future, always open the dev inspector console in your browser to find any error messages.

Upvotes: 28

Related Questions