CODEWITHSUNDEEP
htmlbuttonbootstrap-5navbarhamburger-menu
Josh Dawson
Josh Dawson

Reputation: 1

My hamburger menu is stuck open and I don't know how to fix it

So I'm making a site in the newest version of Bootstrap for uni but my hamburger menu for my navigation is stuck open, and when you scroll it stays on screen and over all the other content. Please Help.

I've only pasted the navbar because it was broken before the other content was added. The menu and icon show up, its just stuck open and the button does not do anything. Its just by default open for some reason. Also its just stuck vertical, on the left side, no matter how big or small the screen is.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Southwest Vet</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
 
  <body>
     <header>
       <nav class="navbar navbar-light navbar-expand-medium  fixed-top" id="navbar-site">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">Logo</a>
          <button class="navbar-toggler" type="button" data-bs-toggler="collapse" data-bs-target="collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collpase navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="featured">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="mission">Mission</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="staff">Staff</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="testimonials">Testimonials</a>
                </li>
              </ul>
            </div>
        </div>
      </nav>
</body>
</html>

Upvotes: 0

Views: 31

Answers (1)

Yong Shun
Yong Shun

Reputation: 51420

  1. You need to import the Bootstrap Bundle script file in the <header> element.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  1. The <header> tag shouldn't be appear in the <body>.

  2. Typo errors in your button. data-bs-toggle instead of data-bs-toggler and you need the # for referring to the element id in data-bs-target.

<button
  class="navbar-toggler"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#collapsibleNavbar"
>
  <span class="navbar-toggler-icon"></span>
</button>
  1. Typo error for the collapse not collpase.
<div class="collapse navbar-collapse" id="collapsibleNavbar">
  ...
</div>

The complete HTML should be as below:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Southwest Vet</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <nav
      class="navbar navbar-light navbar-expand-medium fixed-top"
      id="navbar-site"
    >
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">Logo</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapsibleNavbar"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="featured">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="mission">Mission</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="staff">Staff</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="testimonials">Testimonials</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Demo @ StackBlitz

You can always refer to Bootstrap Navbar and compare the code to see what's going wrong.

Upvotes: 0

Related Questions