Search code examples
javascripthtmlcssbootstrap-4responsive-navigation

Responsive Navigation Bar using HTML, CSS and JS is not showing the menu; also unable to change order of links

I am creating a portfolio site based on my old one, but using Bootstrap for the layout just because it is faster. I tried to create a drop-down navbar using Bootstrap, but the menu would never appear, so I gave up and just used HTML, CSS and JS. I based it on THIS tutorial by W3C Scools, and followed the directions to a T except I changed the options.

It is also not allowing me to switch the order (example, I want it to be: Home | |Projects | About Me | Contact). Here is my code:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Portfolio</title>

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

    <!-- if IE 9 -->
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"</script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!-- end -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin:0;
}

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

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

.active {
  background-color: pink;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}

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

@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;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <div class="dropdown">
  <button class="dropbtn">Projects
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#websites">Web Sites</a>
      <a href="#jsapps">JavaScript Applications</a>
      <a href="#csharpapps">C# Applications</a>
      <a href="#javaapps">Java Applications</a>
      <a href="#xmlapps">XML Applications/XSLTs</a>
      <a href="#wpsites">WwordPress Sites (Coming Soon)</a>
    </div>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  </div> 
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<!-- Bootstrap rows and columns -->
      <div class="row">
        <div class="col-md-12 text-center">
          <h1>Web Portfolio</h1>
        </div>
      </div>

    <hr /> 
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <h3>Skill 1</h3>
        <p>Stuff goes here
        </p>
      </div>

       <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 2</h3>
        <p>Stuff goes here
        </p>
      </div>

       <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 3</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 4</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 5</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 6</h3>
        <p>Stuff goes here
        </p>
      </div>

     </div>
  </div>

    <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
    <!-- scripts into the body -->
   <script src="jquery.js"</script>
   <script src="bootstrap.js"></script>
<!-- </footer>PLC &copy;2018 All Rights Reserved.</footer> -->
  </body>
   </html>

Please, if someone can let me know what I did wrong, I would genuinely appreciate it. Or should I just scrap this and create one using the Nav element, adding CSS and JS to hopefully make it responsive? Thank you.

Solution

  • Your About and Contact divs were wrapped in your Projects dropdown, so I just placed them after:

    function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
    body {
  margin: 0;
}

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

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

.active {
  background-color: pink;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

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

@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;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Portfolio</title>

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

  <!-- if IE 9 -->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <!-- end -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <div class="dropdown">
      <button class="dropbtn">Projects
      <i class="fa fa-caret-down"></i>
    </button>
      <div class="dropdown-content">
        <a href="#websites">Web Sites</a>
        <a href="#jsapps">JavaScript Applications</a>
        <a href="#csharpapps">C# Applications</a>
        <a href="#javaapps">Java Applications</a>
        <a href="#xmlapps">XML Applications/XSLTs</a>
        <a href="#wpsites">WwordPress Sites (Coming Soon)</a>
      </div>
    </div>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
  <!-- Bootstrap rows and columns -->
  <div class="row">
    <div class="col-md-12 text-center">
      <h1>Web Portfolio</h1>
    </div>
  </div>

  <hr />
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 1</h3>
      <p>Stuff goes here
      </p>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 2</h3>
      <p>Stuff goes here
      </p>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 3</h3>
      <p>Stuff goes here
      </p>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 4</h3>
      <p>Stuff goes here
      </p>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 5</h3>
      <p>Stuff goes here
      </p>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <h3>Skill 6</h3>
      <p>Stuff goes here
      </p>
    </div>

  </div>
  </div>

</body>

</html>