CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
hato15
hato15

Reputation: 53

Why isn't my dropdown menu working on navbar?

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>

Upvotes: 3

Views: 67

Answers (1)

Iftifar Taz
Iftifar Taz

Reputation: 839

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

Upvotes: 1

Related Questions