title: Why is my navigation menu not showing up?
body: <p>I am working on a website with some friends for fun and we are having an issue with the nav menu not showing up after we press the button, I had to use flexbox to align my hamburger menu to the navbar originally, but now when we press it, it isnt showing any of the sub menus at all.</p>
  
  <p>Yes, we realize that webkit is for scss, it was just there for examples</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.topnav {
    flex-grow: 1;
    max-height: 100px;
  }
  .navbarItems a {
    float: left;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 24px;
  }
  .navbarItems a:hover {
    background-color: darkgray;
    color: black;
  }
  .navbarItems a.active {
    background-color: white;
    color: white;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: grey;
  }
  /* Hambuger Menu */
  .burger {
    background: none;
    outline: 0;
    cursor: pointer;
    border-top: 4px solid currentColor;
    width: 28px;
    transition: border-top 0.1s ease-in-out;
    -webkit-transition: border-top 0.1s ease-in-out;
  }
  .burger::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  .burger:before {
    content: "";
    display: block;
    border-top: 4px solid currentColor;
    width: 100%;
    margin-top: 5px;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
  .burger:after {
    content: "";
    display: block;
    border-top: 4px solid currentColor;
    width: 100%;
    margin-top: 5px;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    position: relative;
    align-self: center;
  }
  
  .burger-check {
    display: none;
  }
  
  .burger-check:checked ~ .burger {
    border-top: 4px solid transparent;
    transition: border-top 0.5s ease-in-out;
    -webkit-transition: border-top 0.5s ease-in-out;
  }
  .burger-check:checked ~ .burger:before {
    transform: rotate(-405deg) translateY(1px) translateX(-3px);
    -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    align-self: center;
  }
  .burger-check:checked ~ .burger:after {
    transform: rotate(405deg) translateY(-4px) translateX(-5px);
    -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
  .navigation {
    overflow: hidden;
    background-color: black;
    max-height: 0;
    -webkit-transition: max-height 0.5s ease-in-out;
    transition: max-height 1.5s ease-in-out;
  }
  
  .burger-check:checked ~ .navigation{
    overflow: visible;
    background-color: purple;
    max-height: 100%;
    -webkit-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
  }
  
  p {
    background-color: floralwhite;
    font-family: 'Libre Baskerville', serif;
    font-size: 30px;
    text-align: center;
  }
  body {
    background-color: floralwhite;
    font-family: 'Libre Baskerville', serif;
    font-size: 30px;
    text-align: centeR;
  }
  h1 {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    text-align: center;
  }
  a {
    color: inherit;
  }
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  li {
    list-style: none;
    font-size: 25px;
    padding: 5px 0;
  }
  li a {
    text-decoration: none;
  }
  li a:hover {
    text-decoration: underline;
  }
  
  .img {
    width:1000px;
    height:400px;
  }
  
  .header {
    width: 322px;
    height: 219px;
  }
  h4 {
    font-family: 'Libre Baskerville', serif;
    text-align: center;
    list-style: square;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="topnav" id="myTopnav"&gt;
    &lt;div class="navbarItems"&gt;
    &lt;a href="/"&gt;Home&lt;/a&gt;
    &lt;a href="/about.php"&gt;About&lt;/a&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
   &lt;input class="burger-check" id="burger-check" type="checkbox"&gt;
    &lt;label for="burger-check" class="burger"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;nav id="navigation1" class="navigation"&gt; 
    &lt;ul&gt;
      &lt;li&gt;&lt;h1&gt;Professional Awards&lt;/h1&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Advisor Of The Year Award.php"&gt;Advisor of the Year Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Professional Awards/Emerging Advisor Of The Year Award.php"&gt;Emerging Advisor of the Year Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Professional Awards/Emerging Professional Of The Year Award.php"&gt;Emerging Professional of the Year Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Professional Awards/Hall Of Fame Award.php"&gt;Hall of Fame Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Professional Awards/Outstanding Service Award.php"&gt;Outstanding Service Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Professional Awards/Student Of The Year Award.php"&gt;Student of the Year&lt;/a&gt;&lt;/li&gt;
      
      &lt;li&gt;&lt;h1&gt;Service Learning Awards&lt;/h1&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Service Learning Awards/Community Service Award.php"&gt;Community Service Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Service Learning Awards/Environmental Action Awareness Award.php"&gt;Environmental Action Awareness&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Service Learning Awards/Safety Awareness Award.php"&gt;Safety Awareness Award&lt;/a&gt;&lt;/li&gt;  
      &lt;li&gt;&lt;a href="/Pages/Service Learning Awards/Service Learning Individual Award.php"&gt;Service Learning Individual Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Service Learning Awards/Special Olympics Award.php"&gt;Special Olympics Award&lt;/a&gt;&lt;/li&gt;
      
      &lt;li&gt;&lt;h1&gt;Special Recognition Awards&lt;/h1&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/BPA Marketing and Public Relations.php"&gt;BPA Marketing and Public Relations&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/BPA Merit Scholar.php"&gt;BPA Merit Scholar&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/Chapter Activities Award of Excellence.php"&gt;Chapter Activities Award of Excellence&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/Membership Explosion Award.php"&gt;Membership Explosion Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/Recruiter of the Year Award.php"&gt;Recruiter of the Year Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/Social Media Award.php"&gt;Social Media Award&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/Special Recognition Awards/The Professional Cup Award.php"&gt;The Professional Cup&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>