title: Having trouble hiding menu when resizing and when button is pressed
body: <p>I'm using this code:</p>
  <pre><code>@media screen and (max-width: 850px) {  
  #side-menu {  
          display: none;  
      }  
      button {  
          display: block;  
      }  
  }
  </code></pre>
  <p>to hide my side menu and display a button when I resize window. I also want to show and hide menu when the button is pressed. To do that I'm using this code:</p>
  <pre><code>function showMenu() {
    var sideMenu = document.getElementById(&quot;side-menu&quot;);
    if (sideMenu.style.display === &quot;none&quot;) {
      sideMenu.style.display = &quot;block&quot;;
    } 
    else {
      sideMenu.style.display = &quot;none&quot;;
    }
  }
  </code></pre>
  <p>When I hide with button the menu does not reappear when I resize window. I believe this is happening because the javaScript changes the primary style to display: none, so once it's out of range it applies the primary style. Now it's display: none so it doesn't appear again. How can I get it to work how I intend it to? Also, it takes two clicks to show menu for some reason.</p>
  <pre><code>&lt;ul id=&quot;side-menu&quot;&gt; 
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;example1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;example2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;example3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;example4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>html just in case you need it.</p>