title: <span> button not working inside header class?
body: <p>I have a hamburger button in order to show sidebar in my HTML file using JS. Basically it's a code snippet of a <code>&lt;div&gt;</code>, a small JS code, and a <code>&lt;span&gt;</code> class containing the actual hamburger. What I wanted to do was to put the hamburger button (it's not defined by button class though) inline with the header. I managed to do that but for some reason that button is not working now. Can someone please tell me why is that so? And if there is any other way to put the button inline with the header class?</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>/*CSS for header:*/
  
  .header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-family: "Operator SSm A", "Operator SSm B", monospace;
    font-weight: 300;
    font-size: 1rem;
    -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 0;
    margin-top: 10px;
    pointer-events: none;
  }
  
  
  /*CSS for hamburger menu:*/
  
  .overlay-nav {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 2000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header" style="width:100%" id="header"&gt;
    &lt;div class="loading"&gt;&lt;/div&gt;
    &lt;div id="index" class="overlay-nav"&gt;
      &lt;a href="javascript:void(0)" class="closebtn-nav" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
      &lt;div class="overlay-nav-content"&gt;
        &lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;a href="#"&gt;About Us&lt;/a&gt;
        &lt;a href="#"&gt;Sessions&lt;/a&gt;
        &lt;a href="#"&gt;Competitions&lt;/a&gt;
        &lt;a href="#"&gt;Meetings&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;span style="font-size:20px; cursor:pointer" onclick="openNav()"&gt;&amp;#9776; &lt;/span&gt;
    &lt;script&gt;
      function openNav() {
        document.getElementById("index").style.width = "100%";
      }
  
      function closeNav() {
        document.getElementById("index").style.width = "0%";
      }
    &lt;/script&gt;
  
    &lt;div class="header__logo"&gt;
      &lt;img src="" alt="" /&gt;
      &lt;h1&gt;&lt;/h1&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S Is it happening because the pointer events is set to none?</p>