title: How can i create responive navbar with list, javascript and @media
body: <p>I'm trying to create a responsive navbar with list &amp; javascript and @media.
  When i resize the browser to ~700px, the item in list style is &quot;display: none&quot; and the hamburger menu appears. If i don't click the hamburger menu, when i resize the browser to normal size, the list still display inline-block, but when i click the hamburger menu to display menu item in 'list-item', i still get the list-item display type when i resize my browser to normal.</p>
  <p>Am i missing something?</p>
  <pre><code>function myFunction3() {
  
  x = document.getElementsByClassName(&quot;li-tag&quot;);
      if (x[0].style.display === 'none'){
          for (index = 0; index&lt;x.length; index++)
          {
              x[index].style.display = 'list-item';
          }
      } else {
          for (index = 0; index&lt;x.length; index++)
          {
              x[index].style.display = 'none';
          }
      }
  
  }
  </code></pre>
  <p>My @Media</p>
  <pre><code>@media (max-width: 700px){
      .toggle-button{
          display:block;
      }
  
      .li-tag {
          display:none;
      }
  }
  </code></pre>
  <p>CSS of the Navbar:</p>
  <pre><code>.tags{
      background: #0000cc;
      color:white;
      font-family: 'Alata', sans-serif;
      width: 100%;
      text-align: center;
  }
  .ul-tag {
      list-style-type:none;
      width: 70%;
      margin:auto;
      text-align: center;
  }
  .li-tag {
      display:inline-block;
      font-family: 'Alata', sans-serif;
      font-size:25px;
      margin-right: 10px;
  }
  </code></pre>
  <p>HTML Code:</p>
  <pre><code>&lt;div class =&quot;tags&quot; &gt;
          &lt;a href=&quot;#&quot; class =&quot;toggle-button&quot; onclick = &quot;myFunction3()&quot;&gt;☰&lt;/a&gt;
          &lt;ul class = &quot;ul-tag&quot;&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#news&quot;&gt;Type 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag&quot;&gt;&lt;a href=&quot;#contact&quot;&gt;Type 2&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 3&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class = &quot;li-tag &quot;&gt;&lt;a href=&quot;#about&quot;&gt;Type 4&lt;/a&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My <a href="https://jsfiddle.net/w6oyphj2/" rel="nofollow noreferrer">Code</a></p>
  <p>Any input is appreciated!</p>