Bootstrap navbar won't toggle open when collapsed

Question

I've checked all solutions. I've copied many navbar example codes. My navbar collapses when it is supposed to, but clicking the button won't toggle or expand.

In the head I am referencing the CSS for bootstrap

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

On the bottom of the page just before the ending body tag, I am referencing the .js files.

    <script type="text/javascript" src="framework7/js/framework7.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/news-feed.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script defer src="js/fontawesome-all.js"></script>
    <script type="text/javascript" src="js/jquery.3.3.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

And then here is my nav code which I got from bootswatch or bootstrap, don't remember I've tried so many examples.

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">Catholic Cemeteries</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
           </li>
           </ul>

        </div>
      </nav>

Thanks in advance, John

Carol Skelly · Accepted Answer · 2018-03-24T17:54:41.267

You need popper.js. First jquery.js, then popper.js, then bootstrap.js...

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

And, make sure there are no JS errors in the browser console.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/poppe.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Catholic Cemeteries</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
       </li>
       </ul>
    </div>
   </nav>

Thank you. This worked, I was missing popper as you stated. Also js scripts out of order. I had to use the links to the scripts rather than teh local, once working I used the local and still worked. Not sure what happened but thank you . — JVDreamWorker, Mar 26 '18 at 14:18

score 2 · Answer 2 · answered Mar 24 '18 at 18:03

You should reorder the script tags. jQuery, bootstrap and other third party files should be added before your own script files because you use the third party tools in your own code, so they need to be loaded before your own scripts are loaded.

I am assuming that index.js and news-feed.js are your in your own JS file. So I have placed them in the bottom, while the (according to my assumption) third party JS files are placed at top.

<script type="text/javascript" src="framework7/js/framework7.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script defer src="js/fontawesome-all.js"></script>
<script type="text/javascript" src="js/jquery.3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/news-feed.js"></script>

If there is something from news-feed.js is being used is index.js, then place the script tag of news-feed.js before index.js. I hope this helps along with @ZimSystem 's answer

Thank you. I got it working. This was probably part of the problem but as the next answer stated, I was missing popper as well. Truthfully neither one actually worked until I put in links to the JS rather than teh local, then one by one but back the local and it still worked. No clue why but it is working. — JVDreamWorker, Mar 26 '18 at 14:17

Bootstrap navbar won't toggle open when collapsed

2 Answers2