3

I am trying to develop a responsive top nav menu, and I am having a bit of trouble with the hamburger menu. When I resize my browser and click on the hamburger icon, it won't do anything. I have the jquery on my html, but I can't bring down the menu when the browser is resized for some reason. Any help would be appreciated.

here is my code:

$('.nav-toggle').click(function() {
  if ($('.top-nav-links').css('margin-top') == '-225px') {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(window).resize(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(document).ready(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f8f8;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* TOP NAVIGATION CSS */

.top-nav {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.logo:link {
  color: red;
  text-decoration: none;
  font-size: 26pt;
  margin: 10.5px 0;
  display: inline-block;
  float: left;
  font-weight: bold;
}

.logo:visited {
  color: red;
  text-decoration: none;
}

.top-nav-links {
  display: inline-block;
  margin: 0;
  float: right;
}

.top-nav-links li {
  display: inline-block;
  margin: 0 10px;
  padding: 15px 0;
}

.top-nav-links li:first-of-type {
  margin-left: 0;
}

.top-nav-links li:last-of-type {
  margin-right: 0;
}

.top-nav-links li a:link {
  color: red;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
  color: red;
  text-decoration: none;
  font-size: 18px;
}

.top-nav-links li a:hover {
  color: red;
}

.nav-toggle {
  float: right;
  font-size: 30px;
  margin: 8.2px 0;
  color: red;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  display: none;
}

.nav-toggle:hover {
  color: red;
}

@media all and (max-width: 730px) {
  .top-nav-links {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: -255px;
    display: none;
  }
  .top-nav-links li {
    display: block;
    margin: 0;
    text-align: center;
  }
  .nav-toggle {
    display: inline-block;
  }
}
<html>

<head>
  <title>TopNav</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <!-- SCRIPTS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="functions.js">
  </script>
</head>

<body>
  <!-- TOP NAVIGATION -->
  <div class="top-nav clearfix">
    <a href="index.html" class="logo">TopNav</a>
    <div class="nav-toggle">
      <i class="icon ion-md-menu"></i>
    </div>
    <ul class="top-nav-links">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Shop</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

</html>

1 Answer 1

1

There are some issues in your nav-toggle click function.

  1. In condition you are checking margin-top value against -225px everywhere else its -255px I think its a typo.
  2. On max-width: 730px screen you add display: none to top-nav-links class. You also need to toggle that in nav-toggle click function.

Your final nav-toggle click function might look like:

    $('.nav-toggle').click(function () {
        if ($('.top-nav-links').css('margin-top') == '-255px') {
            $('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
        } else {
            $('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.