title: Why My Navigation Menu disappears when I resize the browser. What should I add in the Jquery to prevent this?
body: <p>I have a simple Navigation Menu. I have added a media Query and the breakpoint is 400px. Everything is working perfect except one thing, whenever I expand the menu in Mobile view and then click on the Close button, everything works fine. But the problem arises when I resize the browser from mobile to PC version, whole menu disappears. What should I add in my JQuery code to prevent this Problem?</p>
  
  <p><strong>Note:</strong> 
  Whenever the Menu is expanded and I resize the window, it doesn’t disappear. And I am not taking care of styling the PC Version yet. I will style it later once this issue is resolved.
  The Link is Below. Please have a look at it.<br>
  <a href="https://jsfiddle.net/naeemrind/3ykyLqvh/" rel="nofollow noreferrer">(JSFiddle)</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="close"&gt;&lt;p&gt;CLOSE&lt;/p&gt;&lt;/div&gt;
          &lt;div class="menu-trigger"&gt;&lt;div id="arrow"&gt;&amp;#9660;&lt;/div&gt;&lt;p&gt;MENU&lt;/p&gt;&lt;/div&gt;
          &lt;div class="nav-menu"&gt;
             &lt;ul&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#" class="projects"&gt;Projects&lt;div id="arrow-1"&gt;&amp;#9660;&lt;/div&gt;&lt;/a&gt;
                     &lt;ul&gt;
                         &lt;li&gt;&lt;a href="#"&gt;JQuery&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#"&gt;Web App&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#"&gt;Website&lt;/a&gt;&lt;/li&gt;
                     &lt;/ul&gt;
                 &lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Current Projects&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt; 
          &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>* {
      font-family: sans-serif;
  }
  div .nav-menu {
      background: #e7e7e7;
      padding: 0 20px;
  }
  .nav-menu ul {
      margin: 0;
      padding: 0;
  }
  .nav-menu ul li {
      list-style-type: none;
      float: left;
  }
  .nav-menu ul li a:link, .nav-menu ul li a:visited {
      display: block;
      font-size: 90%;
      padding: 10px 25px;
      color: #305782;
      text-decoration: none;
      font-weight: bold;
  }
  .menu-trigger {
      display: none;
      color: #305782;
      background: #d5dce4;
      padding: 10px;
      text-align: right;
      font-size: 90%;
      cursor: pointer;
  }
  
  .menu-trigger p {
      line-height: 6px;
      margin-top: 7px;
      margin-bottom: 7px;
      margin-right: 10px;
      font-size: 1.3em;
      font-family: sans-serif;
  }
  
  
  @media screen and (max-width: 400px) {
      .menu-trigger {
      display: block;
      }
      .nav-menu ul li {
          float: none;
          border-bottom: 1px solid gray;
      }
      .nav-menu ul li:last-child {
          border-bottom: 0;
      }
      .nav-menu {
          display: none;
      }
      .nav-menu ul ul {
          display: none;
      }
      .nav-expanded {        /* will be added through jQuery */
          display: block;
      }
      .background {         /* will be added through jQuery */
          color: #d6d6d6;
          background: #153448;
          transition: 0.5s;
      }
      .background-1 {        /* will be added through jQuery */
          background: #2f5269;
          color: aliceblue !important;
          transition: 0.5s;
      }
  
      #arrow {            /* For the Main Menu Arrow */
          margin-right: 340px;
          font-size: 1.4em;
          line-height: 0;
          position: absolute;
          left: 25px;
          top: 28px;
          transition: 0.4s;
      }
      #arrow-1 {            /* For the SubMenu Arrow, Projects */
          float: right;
          margin-right: 15px;
          transition: 0.4s;
      }
      .rotated {           /* For Arrow, will be added through jQuery */
          transform: rotate(-180deg);
      }
      .close {
          position: absolute;
          right: 10px;
          top: 9px;
          background: #d5dce4;
          color: aliceblue;
          text-align: right;
          width: 310px;
          height: 36px;
          z-index: 99;
          cursor: pointer;
          display: none;
      }
      .close p {
          padding-right: 15px;   
          line-height: 5px;
          text-align: right;
          font-family: sans-serif;
          color: black;
      }
  }
  </code></pre>
  
  <p><strong>JQuery</strong>  </p>
  
  <pre><code>$(document).ready(function(){
                  $(".menu-trigger").click(function(){
                      $(".nav-menu").slideDown(400);
                      $("#arrow").toggleClass("rotated");
                      $(".close").fadeIn(); 
                      $(".menu-trigger p").css("color", "#909090");
                   });
  
                  /* For Sub Menu Projects */
                  $(".projects").click(function(){
                      $(".nav-menu ul ul").slideToggle();
                      $(".projects").toggleClass("background-1");
                      $("#arrow-1").toggleClass("rotated");
                      $(".nav-menu ul ul li a").css({"background":"#687583", "color":"white"});
                  });  
                  /* For Closing All Menus */
                  $(".close").click(function(){
                      $(this).fadeOut();
                      $(".nav-menu").slideUp(); 
                      $(".nav-menu ul ul").slideUp();
                      $("#arrow-1").removeClass("rotated");
                      $(".projects").removeClass("background-1");
                      $(".menu-trigger p").fadeIn();
                      $(".menu-trigger p").css("color", "#3c3c3c");
                      $("#arrow").toggleClass("rotated");
                  });
              });
  </code></pre>