title: Toggle navigation bar build using javascript
body: <p>For this question please resize your screen width to less than 600px. When screen is less than 600 px, it works perfectly but when the screen becomes larger than 600px its display become none spmehow ?
  <strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;title&gt;Navbar Toggle&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar"&gt;
              &lt;ul&gt;
                  &lt;li class="toggle"&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;/li&gt;
                  &lt;div id="flex"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Trends&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>   * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  *, *:before, *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }
  
  body {
    background-color: #333945;
  }
  
  .navbar {
    background-color: #019031;
    color: white;
  }
  
  .navbar ul {
    margin: 0;
  }
  
  .navbar #flex {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    list-style-type: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  
  .navbar #flex a {
    font-size: 5vh;
    display: block;
    color: white;
    text-decoration: none;
    display: block;
    padding: 25px;
  }
  
  .navbar #flex a:hover {
    background-color: #333945;
  }
  
  .toggle {
    display: none;
    cursor: pointer;
    padding: 15px 10px;
  }
  
  .toggle .bar1, .toggle .bar2, .toggle .bar3 {
    width: 40px;
    height: 5px;
    background-color: whitesmoke;
    margin: 6px 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  
  .change {
    display: inline-block;
    cursor: pointer;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {
    opacity: 0;
  }
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
  }
  
  @media only screen and (max-width: 600px) {
    .navbar #flex {
      display: none;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .navbar #flex a {
      text-align: center;
    }
    .navbar .toggle {
      display: block;
    }
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>let toggle = document.getElementsByClassName("toggle")[0];
  
  toggle.addEventListener("click",myToggle,false);
  
  function myToggle(){
      toggle.classList.toggle("change"); 
  }
  
  
  toggle.addEventListener("click",navFunction,false);
  
  function navFunction(){
      var itemsDisplay = document.getElementById("flex");
  
      if (itemsDisplay.style.display === "flex") {
          itemsDisplay.style.display = "none";
        } else {
          itemsDisplay.style.display = "flex";
        }
  }  
  </code></pre>
  
  <p><strong>Please help me regarding this question. I am new to javascript. I really appreciate if someone help me. Thank You</strong></p>