Bootstrap navbar help?

1

Hi, I’m new to coding and using my quarantine time to try and improve my skills to a professional level. In helping do this I purchased an online course and I’m currently learning Bootstrap.

I’ve hit a wall in my project. I’m setting up the navbar and it collapses at the proper breakpoint, but doesn’t toggle up my options when I click the hamburger. I did some Googling, tried messing with the jQuery and popper, but nothing can get it to toggle (at least that I’ve tried). Was wondering if anyone could and would be willing to look at my code and help out? I’ve attached it below. Thanks in advance!

Blockquote

<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="candy.css">

<title>Museum of Candy</title>

<nav id="main" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
    <a href="#" class="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="nav-link" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navlinks">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">ABOUT</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">TICKETS</a>
            </li>
        </ul>
    </div>
</nav>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>

type or paste code here

2

You have data-target="nav-link" on the button and id="navlinks" on the target div.

It should be:

Button:
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Toggle navigation">

Div:
<div class="collapse navbar-collapse" id="nav-links">

1 Like