Navbar button doesn't toggle collapse (bootstrap is included in settings)

Navbar button doesn't toggle collapse (bootstrap is included in settings)
0

#1

I’m on my second project, so I’m building the portfolio page. As the title says, when I click the navbar button nothing happens. Here’s the code:

<head>
  <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
  <title>Red_Code</title>
</head>

<body>

  <div class="container">
    
    <nav class="navbar navbar-default">
      <div class="navbar-inner">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbody" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>

          <div class="collapse navbar-collapse" id="navbody">
            <ul class="nav navbar-nav nav-center">
              <li><a href="#">About</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        
        </div>
      </div>
    </nav>
    
    <h1 class="text-primary text-center">
      Red_Code
    </h1>
    
    <h2 class="text-center">
      Front-end: creative solutions, effective design.
    </h2>
    
  </div>
  
</body>

And the CSS:

body {
  background-color: #FCFCFC;
  font-family: 'Share Tech Mono', monospace;
}

.container {
  background-color: #252627;
}

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

.navbar-collapse {
    text-align: center;
}

.navbar-nav {
    margin: 0;
    float: none;
    display: inline-block;
    vertical-align: top;
}

li {
  font-size: 2em;
  text-transform: uppercase;
}

.text-primary {
  font-size: 5em;
  color: #BB0A21;
}

h2 {
  font-size: 2em;
  color: #BB0A21;
}

I included both jQuery and Bootstrap in the codepen external CSS menu (as other users suggested in similar topics) by using these links:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

… and it still doesn’t work. Any help would be much appreciated.


#2

You will also need Bootstrap.js

Make sure to import it after jQuery.


#3

Oh man, I’m so stupid, I was only adding the external CSS this whole time. Thanks Ben!