Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Building a Navbar

Posted by ALMEKDAD ALMUHAMMAD
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points

The Hamburger Menu Expands but it Does not Shrink back

The Hamburger Menu expands but it does not shrink back. What should I do? Thanks in advance.

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

<head>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <title>Full Stack Conf</title>


</head>

<body>
  <!-- Nav Bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- End of The NavBar -->

  <div class="container pt-4">
    <!-- about -->
    <div class="row">
      <div class="col-lg">
        <h3 class="mb-4">About Full Stack Conf</h3>
        <img class="mb-4 img-fluid rounded" src="img/pdx.jpg" alt="">
        <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
        <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance
          your career as a web developer.</p>
      </div>
      <div class="col-lg">
        <h3 class="mb-4">Expert Speakers</h3>
        <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
        <p>Want to meet the international JavaScript community and share skills with some of the world's top experts,
          hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
        <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another
          intensive day of learning and sharing.</p>
      </div>
      <div class="col-lg">
        <h3 class="mb-4">What You'll Learn</h3>
        <ul>
          <li><strong>MongoDB</strong>: NoSQL database</li>
          <li><strong>Express</strong>: Framework for Node</li>
          <li><strong>React</strong>: JavaScript library</li>
          <li><strong>Node.js</strong>: JavaScript environment</li>
          <li><strong>ES2015</strong>: Latest version of JavaScript</li>
          <li><strong>Babel</strong>: JavaScript compiler</li>
        </ul>
      </div>
    </div> <!-- end of about -->

    <!-- Speakers -->
    <h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
    [Speaker bios go here]
    <!-- end of Speaker -->

    <!-- Schedule -->
    <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
    [Sshedule goes go here]
    <!-- end of Schedule -->



  </div> <!-- end of the container -->



  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
    integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
    integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
    crossorigin="anonymous"></script>

</body>

</html>

1 Answer

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

You use bootstrap.bundle.min.js and bootstrap.min.js. You should select one like the comment says: "choose one of the two!", and comment out the other option ;-)

ALMEKDAD ALMUHAMMAD
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points

Jonathan Hermansen, thanks a lot. I did not notice that. thanks ^_^