Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 navbar not collapsing or expanding

I am working on teaching myself web development, and I thought what a better way than to start my own personal web page.

I have run into an issue working with Bootstrap 4 and the navbar.

I can get the list, and the icon to show up when the window shrinks, but I can't get it to expand, or toggle collapse. I've even copied and pasted some code from the bootstrap documentation to see what I'm doing wrong and even then it doesn't work.

I've tried on both firefox and chrome, and on both, I am still unable to toggle the collapse with the icon button.

Here's the code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Heath's Personal Website">
  <meta name="keywords" content="heath, blandford, heath blandford">
  <meta name="author" content="heath blandford">
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <!--import bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- import google fonts lobster and open sans -->
  <link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">



</head>

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

  <div class="collapse navbar-collapse" id="navbarTop">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
      <li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
      <li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
      <li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
    </ul>
  </div>
</nav>

<body>

</body>

</html>
like image 217
William Heath Blandford Avatar asked Feb 15 '18 21:02

William Heath Blandford


People also ask

How can make navbar float right in Bootstrap 4?

ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.

How do I make my navigation bar collapse?

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".

Why is Bootstrap navbar not collapsing?

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.

How do I make my Bootstrap navbar bigger?

To slightly increase navbar height: add py-3 class to it. To increase its height a bit more: add py-5 class to your navbar. To decrease navbar height: add py-0 class to your navbar.


1 Answers

Although you've imported the Bootstrap CSS, you've neglected to import the required JavaScript.

Importing Bootstrap's JavaScript and the required dependencies (jQuery and Popper.JS) will cause your navigation to toggle correctly.

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

This can be seen in the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Heath's Personal Website">
  <meta name="keywords" content="heath, blandford, heath blandford">
  <meta name="author" content="heath blandford">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--import bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  
  <!-- import google fonts lobster and open sans -->
  <link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">

</head>

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

  <div class="collapse navbar-collapse" id="navbarTop">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
      <li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
      <li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
      <li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
    </ul>
  </div>
</nav>

<body>

</body>

</html>
like image 132
Obsidian Age Avatar answered Oct 11 '22 14:10

Obsidian Age