CODEWITHSUNDEEP
javascriptjquerycssmenu
reizer
reizer

Reputation: 253

CSS + Jquery SlideToggle Menu Issue when Resizing

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>

Upvotes: 0

Views: 327

Answers (2)

Pattle
Pattle

Reputation: 6016

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;
  }
}

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

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;
  }
}

Upvotes: 1

Related Questions