Bootstrap 4 responsive Navbar won't provide dropdown menu

Question

I'm trying to get the dropdown aspect of bootstrap's navbar to work, and I haven't been able to get the menu to actually drop down. It's so faint I've colored it black to get it to show on the page, but when I click on it, it won't provide any options. JSFiddle here.

Im using the code below for the navbar itself.

<nav class="navbar navbar-expand-md topHeader">
    <a class="navbar-brand nameHeader">
        <h1 class="navbarHeader">David Mitchell Barnett</h1>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation" style="background-color: black" >
            <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.html">
                    <h3>About</h3>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="portfolio.html">
                    <h3>Portfolio</h3>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">
                    <h3>Contact</h3>
                </a>
            </li>
        </ul>
    </div>
</nav>

`bootstrap.min.js` needs the `jquery.js` loading before it loading. — Talent Developer, Aug 12 '18 at 00:32

score 0 · Accepted Answer · answered Aug 12 '18 at 00:14

The problem I noticed is that in your JSFiddle you shared, your js scripts are in the wrong place, you must first link jquery and after you should link the bootstrap js.

Your Code:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Just switch the order like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Oh for christs sake thank you, that fixed it. – David Barnett Aug 12 '18 at 00:26 — David Barnett, Aug 12 '18 at 00:26

Bootstrap 4 responsive Navbar won't provide dropdown menu

1 Answers1