title: Menu get hides when I toggle it in responsive mode
body: <p>I have a responsive menu that in responsive mode you can toggle it with a button in jquery. The problem is when I make screen small and toggle menu (open and close it) when I return to desktop mode menu still stay hidden and this time there is no button to toggle it because it is in desktop mode and there is nothing to toggle it. only when you refresh the page menu will back.</p>
  
  <p>I tried this:</p>
  
  <pre><code>@media screen and (min-width:873px) {
      #navbar{
          visibility: visible;
          display: block;
      }
  }
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>@media screen and (max-width:873px) {
      #navbar{
          visibility: visible;
          display: block;
      }
  }
  </code></pre>
  
  <p>and none of them works. How can I solve this problem? With css or jquery maybe?</p>
  
  <p>my jquery code for toggle menu:</p>
  
  <pre><code>$(document).ready(function(){
      $(".navbar-toggle").click(function(){
          $("#navbar").toggle(500);
      });
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=PT+Sans);
  * {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: 'PT Sans', Arial, Verdana;
    background-color: #eee;
  }
  h1 {
    text-align: center;
    font-size: 48px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #222;
  }
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 120px;
    margin: auto;
    position: relative;
    background-color: #2c3e50;
    z-index: 7;
  }
  .menu li {
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    z-index: 9;
  }
  a.active {
    background-color: #e74c3c;
    pointer-events: none;
  }
  .navbar-toggle{
   display: none;
  }
  @media screen and (max-width:872px) {
   .menu {
    margin-top: 0;
    height: 300px;
    display: none;
    position: relative;
   }
   .menu li {
     float: right;
     width: 100%;
     height: 14%;
     margin: 0;
     padding: 0;
   }
   .res-menu{
    display: block;
   }
   .navbar-toggle{
    display: block;
    margin-top: 15px;
    margin-right: 15px;
   }
   .nav-logo{
    display: none;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;css3 Responsive menu effect&lt;/title&gt;
    
    
    
        &lt;link rel="stylesheet" href="css/style.css"&gt;
   &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
   
    
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;button type="button" class="navbar-toggle"&gt;
   &lt;span class="big-font"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;&lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;ul class="menu" id="navbar"&gt;
    &lt;li&gt;&lt;a href="#" class="active"&gt;Home&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;Portfolio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
   $(document).ready(function(){
    $(".navbar-toggle").click(function(){
     $("#navbar").toggle(500);
    });
   });
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>