Navigation bar issue with media queries

Question

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 manually resize my page, I notice the following issue:

When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?

$(document).ready(function() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  handle.click(function() {
    navigation.slideToggle();
  });
});

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

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

score 0 · Answer 1 · answered Dec 31 '16 at 23:57

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).

score 0 · Accepted Answer · answered Jan 01 '17 at 00:48

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

function mobileNav() {
  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);

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

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

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

There are two functions I don't understand here. Can you possibly explain what they do? `$(window).on('resize', mobileNav);`. `handle.unbind()` — VD18421, Jan 01 '17 at 02:26
@VeeshaDawg See [this](http://stackoverflow.com/q/7404952/483779) and [this](http://stackoverflow.com/q/14969960/483779) for the details. — Stickers, Jan 01 '17 at 15:17

Navigation bar issue with media queries

2 Answers2

Linked