title: I'm very new to javascript, Can you please write a code to close the menu button in the mobile section
body: <p>The below code is working for me but I facing one problem here, in a responsive mobile view, when I clicked on the client menu it is opening but I'm unable to close the clients. Can you please guys help me in this situation.The below code is working for me but I facing one problem here, in a responsive mobile view, when I clicked on the client menu it is opening but I'm unable to close the clients. Can you please guys help me in this situation.
  The below code is working for me but I facing one problem here, in a responsive mobile view, when I clicked on the client menu it is opening but I'm unable to close the clients. Can you please guys help me in this situation.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  &lt;style&gt;
  body {margin:0;font-family:Arial}
  
  .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: #4CAF50;
    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: #555;
    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;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;topnav&quot; id=&quot;myTopnav&quot;&gt;
    &lt;a href=&quot;#home&quot; class=&quot;active&quot;&gt;Home&lt;/a&gt;
    &lt;a href=&quot;#news&quot;&gt;News&lt;/a&gt;
    &lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
    &lt;div class=&quot;dropdown&quot;&gt;
      &lt;button class=&quot;dropbtn&quot;&gt;clients 
        &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;div class=&quot;dropdown-content&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
    &lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt;
    &lt;a href=&quot;javascript:void(0);&quot; style=&quot;font-size:15px;&quot; class=&quot;icon&quot; onclick=&quot;myFunction()&quot;&gt;&amp;#9776;&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  function myFunction() {
    var x = document.getElementById(&quot;myTopnav&quot;);
    if (x.className === &quot;topnav&quot;) {
      x.className += &quot; responsive&quot;;
    } else {
      x.className = &quot;topnav&quot;;
    }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;```
  </code></pre>