Why is my navbar covered by the dropdown navigation menu?

Question

When using media query to ensure proper layout for screens smaller than 800 pixels, the navbar dropdown covers the navbar itself, meaning the menu toggle button is unclickable as it is hidden by the dropdown navbar menu.

This is what it looks like

This is what I need it to look like

var MenuItems = document.getElementByID("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle(){
  if(MenuItems.style.maxHeight == "0px") {
    MenuItems.style.maxHeight = "200px";
  }
  else {
    MenuItems.style.maxHeight = "0px";
  }
}

.MenuIcon {
  width: 28px;
  margin-left: 20px;
  display: none;                             
}


/*------------Media query for menu-------------*/

@media only screen and (max-width: 800px) {
  nav ul {
    position: absolute;
    top: 70px;
    left: 0;
    background: #333;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4444s;
  }

  nav ul li {
    display: block;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  nav ul li a {
    color: #fff;
  }

  .MenuIcon {
    display: block;
    cursor: pointer;
  }
}

<div class="Header">
  <div class="Container">
    <div class="Navbar">
        <div class="Logo">
            <img src="Images/JDSTUDIOSLOGO.png" width="125px">
        </div>
        <nav>
          <ul id="MenuItems">
            <li><a href="">Home</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Content</a></li>
            <li><a href="">Account</a></li>
          </ul>
        </nav>
        <img src="Images/Cart16.png" width="30px" height="30px";>
        <img src="Images/MENU3.png" class="MenuIcon" onclick="menutoggle()">
    </div>
  </div>
</div>