title: CSS Grid Dropdown Menu
body: <p>When clicking on the hamburger icon, I want the dropdown menu to overlay the content below the header. At the moment, the problem is that the dropdown menu is pushing the content down instead of overlaying it. I tried fiddling with z-index and positioning but nothing seems to work.</p>
  
  <p>HTML Code</p>
  
  <pre><code>    &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Document&lt;/title&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;family=Rubik:wght@700&amp;display=swap" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" type="text/css" href="../css/main.css"&gt;
          &lt;script src="https://kit.fontawesome.com/da53fde61e.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;header&gt;
              &lt;img src="../img/Logo.png" class="nav-logo" alt="Rockville Volleyball Academy Logo"&gt;
              &lt;div id="nav-toggle" class="nav-toggle"&gt;
                  &lt;div class="nav-icon"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;nav&gt;
                  &lt;ul id="nav-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Programs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Tournaments&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Recreation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
  
          &lt;section class="home"&gt;
  
              &lt;img src="./img/Logo.png" alt="Rockville Volleyball Academy Logo" class="home-logo"&gt;
          &lt;/section&gt;
  
          &lt;script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="../js/script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS Code </p>
  
  <pre><code>:root {
      --primary-color: #000A41;
      --secondary-color: #c62828;
  }
  
  html {
      box-sizing: border-box;
  }
  
  *, *::before, *::after {
      box-sizing: inherit;
  }
  
  body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
  }
  
  header {
      background-color: var(--primary-color);
      color: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 25% 25%;
  }
  
  /******************/
  /* Navigation bar */
  /******************/
  
  nav {
      grid-column: 1 / 6;
      grid-row: 2 / 3;
  }
  
  nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      transition: height 400ms ease;
  }
  
  nav ul:not(.active) {
      display: none;
  }
  
  nav li {
      text-align: center;
      padding: 25px 10px 25px 10px;
      border-top: 2px solid #fff;
      z-index: 10;
  }
  
  nav li:hover {
      background-color: var(--secondary-color);
  }
  
  nav a {
      text-decoration: none;
      text-transform: uppercase;
      color: #fff;
  }
  
  .nav-toggle {
      grid-column: 5 / 6;
      place-self: center;
      position: relative;
      cursor: pointer;
      width: 50px;
      height: 50px;
  }
  
  .nav-toggle.active .nav-icon {
      background-color: rgba(0, 0, 0, 0);
  }
  
  .nav-toggle.active .nav-icon::before {
      top: 0;
      transform: rotate(45deg);
  }
  
  .nav-toggle.active .nav-icon::after {
      top: 0;
      transform: rotate(135deg);
  }
  
  .nav-icon {
      position: absolute;
      width: 40px;
      height: 6px;
      left: 50%;
      margin-left: -20px;
      top: 50%;
      margin-top: -3px;
      background-color: #fff;
  }
  
  .nav-icon:before,
  .nav-icon:after {
      content: '';
      position: absolute;
      width: 40px;
      height: 6px;
      background-color: #fff;
      transition: 400ms;
  }
  
  .nav-icon:before {
      top: -12px;
  }
  
  .nav-icon:after {
      top: 12px;
  }
  
  .nav-logo {
      grid-column: 1 / 2;
      place-self: center;
      width: 50px;
      margin: 0.5em;
  }
  
  /******************/
  /*    Home Page   */
  /******************/
  
  .home {
      display: grid;
      /* grid-template-rows: 1fr 1fr; */
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 25% 25%;
      background-color: var(--primary-color);
  }
  
  .home-logo {
      grid-column: 2 / 5;
      place-self: center;
      width: 217px;
  }
  </code></pre>
  
  <p>JS Code</p>
  
  <pre><code>var ready = (callback) =&gt; {
      if (document.readyState != 'loading') {
          callback()
      } else {
          document.addEventListener('DOMContentLoaded', callback)
      }
  }
  
  ready(() =&gt; {
      const nav_menu = document.getElementById('nav-menu')
      const nav_icon = document.getElementById('nav-toggle')
  
      nav_icon.addEventListener('click', (e) =&gt; {
          e.preventDefault()
          nav_collapse()
      })
  
  
      function nav_collapse() {
          // set exit icon
          nav_icon.classList.toggle('active')
  
          if (!nav_menu.classList.contains('active')) {
              // display menu
              nav_menu.classList.add('active')
              nav_menu.style.height = 'auto'
  
              // get computed height of menu
              let height = nav_menu.clientHeight + 'px'
  
              // set height of menu to 0 to trigger the slide down animation
              nav_menu.style.height = '0px'
  
              // set 100ms delay for slide down effect
              setTimeout(() =&gt; {
                  nav_menu.style.height = height
              }, 100);
          } else {
              // set height of menu to 0 to trigger the slide up animation
              nav_menu.style.height = '0px'
  
              // collapse menu when animation finishes
              nav_menu.addEventListener('transitionend', () =&gt; {
                  nav_menu.classList.remove('active')
              }, {once: true})
          }
      }
  })
  </code></pre>