title: Animate dropdown button AND have list appear?
body: <p>The problem I have is on lines 45-47 in the second link. If that code is there, the button will animate when clicked (which is good) BUT the dropdown items ("About," "Archive," "Contact") will not appear. If I take lines 45-47 away, the dropdown items appear but no animation occurs. How do I get both the animation AND dropdown items to appear when the button is clicked?</p>
  
  <p>I've been trying to incorporate code from here:
  <a href="http://www.w3schools.com/howto/howto_css_menu_icon.asp" rel="nofollow noreferrer">http://www.w3schools.com/howto/howto_css_menu_icon.asp</a></p>
  
  <p>This is in my <code>header.php</code> file:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
  &lt;button onclick="myFunction(this)"
              class="dropbtn"&gt;
  
              &lt;div class="bar1"&gt;&lt;/div&gt;
              &lt;div class="bar2"&gt;&lt;/div&gt;
              &lt;div class="bar3"&gt;&lt;/div&gt;
  
              &lt;/button&gt;
  
    &lt;div id="myDropdown" class="dropdown-content"&gt;
  
      &lt;a href="http://SITE/?page_id=289"&gt;About&lt;/a&gt;
      &lt;a href="http://SITE/?page_id=148"&gt;Archive&lt;/a&gt;
      &lt;a href="http://SITE/?page_id=318"&gt;Contact&lt;/a&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  /* When the user clicks on the button,
  toggle between hiding and showing the dropdown content */
  function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
  }
  
  function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsByTagName("a");
      for (i = 0; i &lt; a.length; i++) {
          if (a[i].innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
              a[i].style.display = "";
          } else {
              a[i].style.display = "none";
          }
      }
  }
  
  
  function myFunction(x) {
      x.classList.toggle("change");
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is in my <code>style.css</code> file:</p>
  
  <pre><code>.bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #333;
      margin: 6px 0;
      transition: 0.4s;
  }
  
  /* Rotate first bar */
  .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
      transform: rotate(-45deg) translate(-9px, 6px) ;
  }
  
  /* Fade out the second bar */
  .change .bar2 {
      opacity: 0;
  }
  
  /* Rotate last bar */
  .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
      transform: rotate(45deg) translate(-8px, -8px) ;
  }
  </code></pre>