Why is my hamburger navigation not loading when its in desktop mode?

Question

I am coding a website for my high school, and I am using a hamburger navigation for the website. When the website is shrunk to mobile mode, the hamburger loads and everything works. But if I close the hamburger and bring the website back to Desktop mode, the navigation is gone, because the <ul> tag is changed to display="none"; and I can't find a way to fix it.

$(document).ready(function() {
  $(".hamburger").click(function() {
    $("nav > ul").slideToggle(800);
  })
});

nav {
  width: 100%;
  min-height: 50px;
  float: left;
  font-family: "TT Pines Bold Italic DEMO";
  font-size: 18px;
  background: #444;
  text-align: center;
  display: block;
  top: 0;
  position: fixed;
  z-index: 10;
}

nav>ul {
  padding: 0;
  list-style: none;
  overflow: hidden;
  margin: 0;
}

nav>ul>li {
  display: inline;
  line-height: 50px;
}

nav>ul>li>a {
  text-decoration: none;
  color: #fff;
  padding: 25px 17px;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: 'Open Sans Condensed', sans-serif;
}

a:hover {
  text-decoration: none;
  color: #efb60b;
}

@media only screen and (max-width: 320px) {
  nav {
    width: 100%;
    float: left;
    text-align: center;
  }
  nav>ul {
    margin-top: 50px;
    padding: 0;
    display: block;
    list-style: none;
  }
  nav>ul>li,
  nav>ul>li>a {
    line-height: 50px;
    display: list-item;
    margin-left: 0;
  }
  .hamburger {
    padding: 20px;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  nav {
    width: 100%;
    float: left;
    text-align: center;
  }
  nav>ul {
    margin-top: 50px;
    padding: 0;
    display: block;
    list-style: none;
  }
  nav>ul>li,
  nav>ul>li>a {
    line-height: 50px;
    display: list-item;
    margin-left: 0;
  }
  .hamburger {
    padding: 20px;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span class="hamburger"><i class="fa fa-bars" aria-hidden="false"></i></span>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="students.html">Students</a></li>
    <li><a href="parents.html">Parents</a></li>
    <li><a href="athletics.html">Athletics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

use `toggleClass` instead of `slideToggle` and define an `hide` css class which hides the `ul` but only for mobile devices (use media queries). — abidibo, Oct 31 '17 at 16:23
I imagine there must be some more relevant code, possibly some CSS media queries... What makes makes the change between desktop nav and hamburger menu? — showdev, Oct 31 '17 at 16:23
@Cheshire No, I am using Jquery. I am using it from this link [link](https://code.jquery.com/jquery-1.12.3.min.js) — Chayton L., Oct 31 '17 at 16:23
Because the structure of the burguer looks a lot like bootstrap — Zander, Oct 31 '17 at 16:27
The hamburger icon shows up in "Desktop mode". However, since styling is only applied on small screens, it's black on dark grey background and therefore not very visible. — delCano, Nov 02 '17 at 19:21

score 1 · Accepted Answer · answered Nov 02 '17 at 19:28

First of all, the hamburguer icon does show up on wide screens. However, its styling is only applied on small screens, and therefore on wide ones it's centered and black, not easily visible on the dark grey background.

Second, the use case you present (opening the site on a small screen, hiding the menu, and then widening the screen) is not very common outside of test situations, so it is not a very big problem. However, you can solve it with a new media query:

@media only screen and (min-width: 768px) {
  nav>ul {
    display: block!important; /* This forces the browser to apply this rule and show the menu, even if the inline css says to hide it */
  }
  nav>.hamburguer {
    display: none; /* This hides the hamburguer icon */
  }
}

Thank you much! I can finally relax. – Chayton L. Nov 03 '17 at 01:24 — Chayton L., Nov 03 '17 at 01:24

score 0 · Answer 2 · answered Nov 02 '17 at 19:40

So I'd like to state that your css is hidden unless the specified dimensions are met. And since "full-screen" mode isn't under those dimensions the css does not apply.

@media only screen and (max-width: 768px) and (min-width: 320px)
js:94
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 24px;
cursor: pointer;
}

This is what's being applied when in your "mobile" mode, have another media parameter for everything above (max-width: 768px, min-width: 320px).

PS: You're doing great, keep at it.

Christopher Thank you so much for your help but it did not work. But thank you for getting me steps closer — Chayton L., Nov 03 '17 at 01:25

Why is my hamburger navigation not loading when its in desktop mode?

2 Answers2