CODEWITHSUNDEEP
htmlcss
Zachary Brasseaux
Zachary Brasseaux

Reputation: 67

Navbar dropdown menu not appearing

Currently trying to implement the w3schools responsive navbar found here: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

It is somewhat working, however on small screens, the dropdown menu does not appear. Instead, the last item on the list is in its place. I am not sure what's going on but I feel like I'm missing a key aspect of this. Code below, any advice is appreciated!

function myFunction() {
  var x = document.getElementById("mynav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}
  .nav {
  position: fixed;
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
  width: 100%;
  height: calc(20px + .2vw);
  top: 0;
  opacity: 1.0;
  z-index: 10000000;
}

.nav a {
  color: #5a5a5a;
  font-size: calc(7.75px + .25vw);
  font-weight: bold;
  padding: 10px 10px;
  text-transform: uppercase;
}

.nav a:hover {
  background: #e1e1e1;
  color: black;
}

.nav li {
  display: inline;
}

.nav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .nav.responsive {
    position: relative;
  }
  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
<div class="nav" id="mynav">
  <div class="container">
    <ul class='pull-left'>
      <a href="#home" class="active">Home</a>
      <a href="#news">Tools</a>
    </ul>
    <ul class="pull-right">
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

Upvotes: 1

Views: 487

Answers (1)

nourza
nourza

Reputation: 2321

Add this link in the head 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="topnav" id="myTopnav">

        <div class="container">
          <a href="#home" class="active">Home</a>
          <a href="#news">Tools</a>

          <a href="#contact" class="left">Contact</a>
          <a href="#about" class="left">About</a>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>

    </div>


<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.left {
  float: right !important;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .left{
    float: left !important;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
    .left{
    float: left !important;
    display: block;
}
}
</style>

Upvotes: 2

Related Questions