Reply To: My first jQuery XP: looking for some help

[Senff]

Keep in mind that some of your jQuery code is ONLY executed on page load.

So for example:

if ($(window).width() < 500) {
  toggle_container.hide();
}

It will only hide the toggle_container if your window is smaller than 500 on page load, because that’s when the IF statement is tested. If it’s larger than 500 and then you resize it to less than 500, the toggle_container.hide will not be executed.

This code however:

toggle.on('click', function(){
  toggle_container.slideToggle();
});

While it’s initially loaded on page load, it will keep running in the background (so to speak) because you basically say “keep testing this thing all the time and do something when there’s a click event on the “toggle” element“.

Make sure you don’t mix things up. If you want to show or hide something based on the window width, do this with media queries. Javascript/jQuery is usually not needed for that. You kinda mixed things up there, by using both methods.

Finally, the syntax for your media query is incorrect. You have:

.main-nav-toggle {
    @media screen and (min-width: 500px) {
      display: none;
  }
}

I’m not sure if that’s because you Codepen’s internal style parser is different or if that’s a Sass-type of doing things, but this is the standard way:

@media screen and (min-width: 500px) {
    .main-nav-toggle {
        display: none;
    }
}