title: Using jQuery to toggle a navbar, and if user engages navbar media queries stop working
body: <p>I have a navbar that is set to be hidden by default. There is a hamburger icon that, when clicked, engages some js/jquery to toggle between the navbar being hidden/showing. </p>
  
  <p>I also have a media query that sets the navbar to always be showing on smaller screens, and to place the navbar to the top of the page where it is displayed as a row. My problem is that if I engage the navbar (toggle it to show, then toggle back to hide) my media query does not work, and the navbar never shows up when the breakpoint is hit.</p>
  
  <p>Here's the code:</p>
  
  <p>Navbar CSS, default state:</p>
  
  <pre><code>.navbar-hidden{
    grid-row-start: 2;
    display: flex;
    flex-direction: column;
    max-width: 300px;
    display: none;
    justify-content: flex-start;
    height: 100%;
   }
  </code></pre>
  
  <p>JS/jQuery targeting the navbar:</p>
  
  <pre><code>$(document).ready(function(){
   $("#menu").click(function(event){
     event.preventDefault();
     $(".navbar-hidden").toggle();
   })
  });
  </code></pre>
  
  <p>Media query that targets the navbar-hidden (which should now always show) after a breakpoint:</p>
  
  <pre><code>@media screen and (max-width: 1200px) {
    .navbar-hidden {
      display: show !important;
      grid-row-start: 1;
      grid-column-start: 2;
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: nowrap;
      font-size: 3em;
      min-width: 100%;
    }
  </code></pre>