title: Slide down from the Top effect not working on JavaScript
body: <p>I am expecting that one of my button will work and pop out these forms, but every time I hit the button &quot;More&quot; nothing happens. Please help!</p>
  <pre><code>&lt;body&gt;
      &lt;!--Hero Image--&gt;
      &lt;div class=&quot;hero-image&quot;&gt;
          &lt;div class=&quot;hero-text&quot;&gt;
              &lt;h1 id=&quot;demo&quot;&gt;Hi! I'm Jake&lt;/h1&gt;
              &lt;p&gt;Webby web&lt;/p&gt;
  
          &lt;!-- The overlay --&gt;
          &lt;div id=&quot;myNav&quot; class=&quot;overlay&quot;&gt;
  
            &lt;!-- Button to close the overlay navigation --&gt;
            &lt;a href=&quot;javascript:void(0)&quot; class=&quot;closebtn&quot; onclick=&quot;closeNav()&quot;&gt;&amp;times;&lt;/a&gt;
  
            &lt;!-- Overlay content --&gt;
            &lt;div class=&quot;overlay-content&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;Clients&lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!--Use any element to open/show the overlay navigation menu--&gt;
          &lt;button class=&quot;button&quot; onclick=&quot;myFunction()&quot;&gt;More&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>