My dropdown menu is not working

Question

So I'm pretty new at HTMl/CSS and Bootstrap. I am currently trying to implement a dropdown menu on my website. I am using the code from my theme on Bootswatch here. When I click on the Dropdown menu, nothing happens. Does anyone know why it isn't working?

HTML:

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Website Stefan</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link href="main.css" type="text/css" rel="stylesheet"/>
      <script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
      <script type="text/javascript" src="klassenlijst.js"></script> 
      <script type="text/javascript" src="hamburger.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Stefan Stromberg</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">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="opleiding.html">CV</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Overig</a>
      </li>
      <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
    </ul>
    </div>
</nav>
    <div class="jumbotron">
  <h1 class="display-3">...</h1>
  <p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
  <hr class="my-4">
  <p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
   </body>
</html>

I'm not doing anything in CSS that could cause this issue as far as I'm aware. But here's that code for if you need it.

.jumbotron {
    background-color: whitesmoke;
    height: 100%; 
}

html, body {
    height: 100%;
}

.display-3 {
    color: black;
    font-family: inherit;
}
.lead {
    color: black;
    font-family: inherit;
}

p {
    color: black;
    font-family: inherit;
}

body {
    height: 100%;
    background-color: whitesmoke;
}

.display-5 {
    color: black;
    font-family: inherit;
}

li {
    color: black;
    font-family: inherit;
}

score 1 · Accepted Answer · answered Apr 18 '18 at 20:20

Include jquery and bootstrap javascript libraries.

.jumbotron {
    background-color: whitesmoke;
    height: 100%; 
}

html, body {
    height: 100%;
}

.display-3 {
    color: black;
    font-family: inherit;
}
.lead {
    color: black;
    font-family: inherit;
}

p {
    color: black;
    font-family: inherit;
}

body {
    height: 100%;
    background-color: whitesmoke;
}

.display-5 {
    color: black;
    font-family: inherit;
}

li {
    color: black;
    font-family: inherit;
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Website Stefan</title>  
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="main.css" type="text/css" rel="stylesheet"/>
      <script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
      <script type="text/javascript" src="klassenlijst.js"></script> 
      <script type="text/javascript" src="hamburger.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Stefan Stromberg</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">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="opleiding.html">CV</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Overig</a>
      </li>
      <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
    </ul>
    </div>
</nav>
    <div class="jumbotron">
  <h1 class="display-3">...</h1>
  <p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
  <hr class="my-4">
  <p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
   </body>
</html>

That worked! Thanks! Should I always import these files if I'm working with Bootstrap? — Jack, Apr 19 '18 at 14:48
@Jack Quite so! [link](https://www.w3schools.com/bootstrap/bootstrap_get_started.asp) — ernesthm, Apr 19 '18 at 17:24

score 0 · Answer 2 · answered Apr 18 '18 at 20:14

We have a beautiful website that has no idea what do do when we click something. This is when we bring in some JavaScript.

In the main project directory, create a separate js file (often called main.js). Within the contents of that file, we will need some jQuery (Which is preloaded based off of the CDN that you have on line 10.

Within the new file we add:

$( document ).ready(function() {
    $('.dropdown-toggle').dropdown()
});

This is an implementation of jQuery that waits for the document to load and then listen for the click event on an element with the class dropdown-toggle.

Now that we have the JS ready to go for our button, place the file path within a pair of script tags. I like to put them at the bottom of the page.

 <script src="main.js"></script>

This will link the file with our JS to our page so we can react to events occurring on the DOM.

More cool stuff with the drop down can be found here: https://getbootstrap.com/docs/4.0/components/dropdowns/

Welcome to the wonderful world of Dev!

My dropdown menu is not working

2 Answers2