title: Responsive topnav "close icon" overlay with the selected tab
body: <p>I'm new to html and css. but I've been doing some stuff.
  I'm trying this resposive topnav from w3.css
  When I open the website on my phone, I get the close icon on the top of "Home". and if not opened, it shows under, and not in the right side. If on computer, zoom in until the icon goes under home.
  I have this online version of the html: <a href="http://nbgsistem.com/teste_w3.html" rel="nofollow noreferrer">http://nbgsistem.com/teste_w3.html</a></p>
  
  <pre><code>&lt;style&gt;  
    ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0; 
    overflow: hidden;
    background-color: #333;
  }
  
  ul.topnav li {float:none;display:inline-block}
  
  ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    transition: 0.2s;
    font-size: 100%;
  }
  
  ul.topnav li a:hover {background-color: #555;}
  
  ul.topnav li.icon {display: none;}
  
  @media screen and (max-width:800px) {
    ul.topnav li:not(:first-child) {display: none;}
    ul.topnav li.icon {
      position:relative;
      float: right;
      display: inline-block;
    }
  }
  
  
  @media screen and (max-width:800px) {
    ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
      position: absolute;
      float:right;
      right: 0;
      top: 0;
    }
  
  
    ul.topnav.responsive li {
      float: none;
      display: inline;
    }
    ul.topnav.responsive li a {
      display: block;
      text-align: left;
    }
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
                              &lt;!--WebSite--&gt;
  
  &lt;body background="images/NBG_back.png"&gt; 
  
                              &lt;!--Top Navigation--&gt;
  
  
  &lt;div class="w3-black-mod w3-center"&gt;
      &lt;a href="Index.html"&gt;&lt;img src="images/NBG.png" alt="NBG Logo"  style="width:300px;height:100px;"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;ul class="topnav w3-light-gray w3-large w3-center" id="myTopnav"&gt;
    &lt;ul class="w3-navbar w3-black-mod w3-large w3-center"&gt;    
      &lt;li&gt;&lt;a class="w3-border-bottom w3-current" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="w3-border-bottom w3-hover-selec" href="destaques.html"&gt;Destaques&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="w3-border-bottom w3-hover-selec" href="produtos.html"&gt;Produtos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="w3-border-bottom w3-hover-selec" href="haccp.html"&gt;HACCP&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a class="w3-border-bottom w3-hover-selec" href="fds.html"&gt;Fichas de Segurança&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="w3-border-bottom w3-hover-selec" href="contactos.html"&gt;Contactos&lt;/a&gt;&lt;/li&gt;
      &lt;li class="icon"&gt;&lt;a href="javascript:void(0);" style="font-size:100%; position: relative" onclick="myFunction()"&gt;☰&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ul&gt;
  
  &lt;script&gt;
  function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav w3-light-gray w3-large w3-center") {
      x.className += " responsive";
  } else {
      x.className = "topnav w3-light-gray w3-large w3-center";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>