CSS + Jquery SlideToggle Menu Issue when Resizing

Question

Can someone please tell me why my links disappear when i resize the window.

1. I start with small (mobile) window. Click menu, close menu.
2. Resize the window to larger and links are all gone. If i refresh the page, they reappear.

I can't figure out if it's jquery, or css mistake somewhere...

 $(document).ready(function() { $('.openmenu').click(function() { $('#menu>ul').slideToggle(100); var $this = $(this); $this.toggleClass('openmenu'); if ($this.hasClass('openmenu')) { $this.html('☰'); } else { $this.html('✕'); } }); }); 

 #menu { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #FFF; background-color: #000; cursor: pointer; height: 40px; } .omstyle { font-size: 1.5em; padding-left: 10px; line-height: 40px; } #menu ul { display: none; background-color: #333; } #menu ul li { padding: 10px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; float: none; } #menu ul li a { color: #FFF; text-decoration: none; } @media screen and (min-width: 469px) { .omstyle { display: none; } #menu ul { display: block; } #menu ul li { float: left; display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu"> <div class="omstyle"> <div class="openmenu">&#9776;</div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Diet</a></li> <li><a href="#">Skin</a></li> <li><a href="#">Digestion</a></li> <li><a href="#">Hair</a></li> <li><a href="#">For Men</a></li> </ul> </div> 

Answer 1

It seems the jquery script is not applying rule considering also the media query. To solve, modify the media query as follows

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
     display: block !important; /* ADD IMPORTANT*/
  }
  #menu ul li {
    float: left;
    display: block;
  }
}

Answer 2

It's because the slideToggle() method you are using applies an inline style of display: none when the menu is closed on mobile. When you resize the browser this inline style is still present and its taking precedence over your CSS.

One way to fix it is to use the !important flag

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
    display: block !important;
  }
  #menu ul li {
    float: left;
    display: block;
  }
}