title: Navigation menu disappears after moving from small to full screen
body: <p>I have created a mobile responsive menu where I have replaced the icon and show/hide the menu.</p>
  
  <p><strong>First</strong> The main navigation menu is doing fine and I resize the screen and move to the mobile version. 
  <strong>Then</strong> I have clicked the hamburger menu, it worked fine. 
  <strong>When</strong> I make the window size larger again, the main navigation menu is not showing up.
  <strong>So the issue is</strong>, my main navigation menu disappears when I move from 767px size to full screen.
  I have used ionic icons where <strong>ion-navicon-round</strong> is hamburger menu and <strong>ion-close-round</strong> is the large x icon.</p>
  
  <p>Here is situation described with the images.
  First: In the full screen
  <a href="https://i.stack.imgur.com/q7UO3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q7UO3.png" alt="First: In the full screen"></a></p>
  
  <p>This is the responsive menu.
  <a href="https://i.stack.imgur.com/kog58.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kog58.png" alt="This is the responsive menu"></a></p>
  
  <p>Navigation menu disappeared.
  <a href="https://i.stack.imgur.com/QcvmA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QcvmA.png" alt="Navigation menu disappeared"></a></p>
  
  <p>This is my HTML Code for the navigation menu.</p>
  
  <pre><code>&lt;!-- HTML code --&gt;
  &lt;ul class="main-nav js--main-nav"&gt;
      &lt;li&gt;&lt;a href="#features"&gt;Food delivery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#works"&gt;How it works&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#cities"&gt;Our cities&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#plans"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;a class="mobile-nav-icon js--nav-icon"&gt;&lt;i class="ion-navicon-round"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is the Jquery code that I have used to show and hide the responsive menu.</p>
  
  <pre><code>/* Mobile Navigation*/
  
  $('.js--nav-icon').click(function() {
  
      var nav = $('.js-main-nav');
      var icon = $('.js--nav-icon i');
      nav.slideToggle(200);
      if(icon.hasClass('ion-navicon-round')){
          icon.addClass('ion-close-round');
          icon.removeClass('ion-navicon-round');
          $(".js--main-nav").slideDown();
  
      }
      else {
          icon.removeClass('ion-close-round');
          icon.addClass('ion-navicon-round');
          $(".js--main-nav").slideUp();
      }
  });
  
  var width = $(window).width();
  $(window).resize(function(){
     if(width &gt;= 768){
         $(".js--main-nav").slideDown();
     } 
  });
  </code></pre>