Question

121

Bootstrap 4 navbar not collapsing on large screen

rated 0 times [ 122] [ 1] / answers: 1 / hits: 42042 / 7 Years ago, thu, november 16, 2017, 12:00:00

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:

Removing all custom CSS

Ensuring jQuery link is before Bootstrap JS file

Script tags in the header and the footer

Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)

Ensuring that JS is being used in the Chrome browser

Validated HTML using WC3 validator

And of course, read various posts on SO about this issue but none lead to a resolution

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devonw

Add To Favorites

Follow

Total Points: 311

Total Questions: 116

Total Answers: 111

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

answered 7 Years ago madelyn · Accepted Answer

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.