title: How to hide sidebar when screen too small? Without framework
body: <p>My sidebar html looks like this:</p>
  
  <pre><code>&lt;div id="sidenav"&gt;
      &lt;img id="logo" src="Images/Logo.png"&gt;
      &lt;a href="#first"&gt;
          &lt;p&gt;Home&lt;/p&gt;
      &lt;/a&gt;
      &lt;a href="#second"&gt;
          &lt;p&gt;What?&lt;/p&gt;
      &lt;/a&gt;
      &lt;a href="#third"&gt;
          &lt;p&gt;Who?&lt;/p&gt;
      &lt;/a&gt;
      &lt;a href="#fourth"&gt;
          &lt;p&gt;Contact&lt;/p&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>#sidenav {
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
  transition: all 300ms ease 0s;
  }
  
  #sidenav a {
  padding: 0px 0px 0px 32px;
  margin: 0px;
  text-decoration: none;
  color: #0e1c2c;
  display: block;
  transition: 0.3s
  }
  
  #sidenav a:hover {
  color: #ea4e3c;
  }
  </code></pre>
  
  <p>My idea was to use this: </p>
  
  <pre><code>@media screen and (max-height: 450px) {
  #sidenav {
      display: none;
  }
  </code></pre>
  
  <p>But it wasn't working. </p>
  
  <p>My end goal is to remove the sidebar completely when people are viewing on mobile, then maybe add another container at the top of the page with the logo in. This way there's a lot more room for the page to breathe since it's just a 100% width container, above another, above another. Is it possible just to make the changes to the CSS and html you want within an @media bracket? 
  Any help appreciated!</p>