Navigation Bar Issue With Media Queries

When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it. When I manua

Solution 1:

You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:

$(document).ready(mobileNav);
$(window).on('resize', mobileNav);

functionmobileNav() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  if (window.innerWidth <= 400) {
    navigation.hide();
  } else {
    navigation.show();
  }
  handle.unbind().click(function() {
    navigation.slideToggle();
  });
}

Also, <a> is not allowed directly under <ul>, so move them into <li>s.

jsFiddle

$(document).ready(mobileNav);
$(window).on('resize', mobileNav);

functionmobileNav() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  if (window.innerWidth <= 400) {
    navigation.hide();
  } else {
    navigation.show();
  }
  handle.unbind().click(function() {
    navigation.slideToggle();
  });
}

navul {
  background-color: #43a286;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
}
navulli:hover {
  background-color: #399077;
  transition: 0.5s;
}
navulli {
  display: inline-block;
}
navullia {
  display: block;
  padding: 20px;
  color: #fff;
}
.handle {
  width: 100%;
  background: #005c48;
  text-align: left;
  box-sizing: border-box;
  padding: 15px;
  color: white;
  display: none;
}
.handlei {
  float: right;
  cursor: pointer;
}
@media screen and (max-width: 400px) {
  navulli {
    box-sizing: border-box;
    width: 100%;
    display: block;
    text-align: left;
    box-shadow: 1px1px#399077;
  }
  navullia {
    padding: 15px;
  }
  .handle {
    display: block;
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><nav><divclass="handle">Menu</div><ulclass="navigation"><li><ahref="#">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Service</a></li><li><ahref="#">Contact</a></li></ul></nav>

Solution 2:

If you slideToggle the navigation menu once the .handle was clicked - it is now hidden. If you will resize the window (after the navigation is hidden) - it will still be hidden (because you did nothing to show it again).

You can use the resize event to run any other function once the window was resized (note that you will need to check if the resize was to shrink or enlarge the window, then you will need to check if the navigation is visible or not - and then to show it (if it's hidden).