Responsive Navbar

Part of the JavaScript in Action section of Coddy's HTML journey — lesson 26 of 27.

Challenge

Easy

We have the HTML and CSS for the burger menu and navigation on our website about Maya civilization.

Your task is to make the JavaScript work so the menu opens and closes when the button is clicked.

Follow these steps:

Create a variable to store the burger button element using getElementById("burger").
Create another variable to store the navigation menu using getElementById("navMenu").
Add an event listener on the button so that when it’s clicked, a function runs.
Inside this function:
- Toggle the "active" class on the button (this will animate the 3 lines).
- Toggle the "active" class on the menu (this will show or hide the links).

When done correctly, clicking the burger button should animate the lines into an “X” and show the navigation menu.

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>Maya Civilization</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo">Maya World</div>
    <div id="burger" class="burger-btn">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    <nav id="navMenu" class="nav-links">
      <a href="#">Home</a>
      <a href="#">History</a>
      <a href="#">Culture</a>
      <a href="#">Architecture</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>The Maya Civilization</h1>
      <p>
        The Maya civilization thrived in Mesoamerica, known for its remarkable
        achievements in astronomy, mathematics, and monumental architecture.
      </p>
    </section>

    <section class="content">
      <h2>Legacy of the Maya</h2>
      <p>
        The Maya left behind impressive cities, pyramids, and written language. 
        Their deep knowledge of astronomy influenced calendars and rituals, while 
        their art and traditions continue to inspire today.
      </p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/El_Castillo%2C_Chich%C3%A9n_Itz%C3%A1.jpg"
           alt="Maya Pyramid" class="content-img">
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>