title: How do I make a menu icon on a responsive navigation bar animated into an x icon?
body: <p>I am making my first web app, and am working on a top navigation bar.  I am making it responsive, where the menu icon only shows up if the screen width is less than 600 px. I would like for the menu icon to turn into an X icon once the menu icon is clicked on, but I am not quite sure how to do this.</p>
  
  <p>Below is  my code for the navigation bar.</p>
  
  <p>'''</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
      body {margin:0;font-family:"Trebuchet MS"}
  
      .topnav {
          overflow: hidden;
          background-color: #333;
      }
  
      .topnav a {
          float: left;
          display: block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 17px;
      }
  
      .active {
          background-color: #4C00AF;
          color: white;
      }
  
      .topnav .icon {
          display: none;
      }
  
      .dropdown {
          float: left;
          overflow: hidden;
      }
  
      .dropdown .dropbtn {
          font-size: 17px;
          border: none;
          outline: none;
          color: white;
          padding: 14px 16px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
      }
  
      .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
      }
  
      .dropdown-content a {
          float: none;
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
      }
  
      .topnav a:hover, .dropdown:hover .dropbtn {
          background-color: #554647;
          color: white;
      }
  
      .dropdown-content a:hover {
          background-color: #ddd;
          color: black;
      }
  
      .dropdown:hover .dropdown-content {
          display: block;
      }
  
      @media screen and (max-width: 600px) {
          .topnav a:not(:first-child), .dropdown .dropbtn {
              display: none;
          }
          .topnav a.icon {
              float: right;
              display: block;
          }
      }
  
      @media screen and (max-width: 600px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
              position: absolute;
              right: 0;
              top: 0;
          }
          .topnav.responsive a {
              float: none;
              display: block;
              text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
              display: block;
              width: 100%;
              text-align: left;
          }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>    &lt;div class="topnav" id="myTopnav"&gt;
          &lt;a href="#home" class="active"&gt;Home&lt;/a&gt;
          &lt;a href="#contact"&gt;Page2&lt;/a&gt;
          &lt;div class="dropdown"&gt;
              &lt;button class="dropbtn"&gt;About
                  &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;div class="dropdown-content"&gt;
                  &lt;a href="#"&gt;Hello&lt;/a&gt;
          &lt;a href="#"&gt;Salutations&lt;/a&gt;
          &lt;a href="#"&gt;Hi&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a href="javascript:void(0);" style="font-size:15px;" class="icon" 
      onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
      &lt;/div&gt;
  
  
      &lt;script&gt;
          function myFunction() {
              var x = document.getElementById("myTopnav");
              if (x.className === "topnav") {
                  x.className += " responsive";
              } else {
                  x.className = "topnav";
              }
          }
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>'''</p>
  
  <p>Thank you!</p>