CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thecodingexpert112
Thecodingexpert112

Reputation: 23

How to make my navigation bar clickable again?

In my website I have a hamburger menu that only shows up when the width of the screen is less than 415px. So when you click the hamburger icon it works but when you click like "jobs" or "contact" nothing pops up. There suppose to be a popup div or container that has a x icon on the side and blank div. I've been searching for this for literally 4 hours and can't find anything. Here is my html and the rest will be uploaded to codepen.

Demo: https://codepen.io/anon/pen/jBmzRq

HTML

<div id="jobs-popup">
  <img id="x-icon1" src="web%20x%20icon%20white.png">
  <div class="jobs-content">
    <a href="mailto:[email protected]" target="_top" class="email"></a>
  </div>
</div>
<!--End Section for Jobs Popup -->
    
<!-- Section for contact popup -->
<div id="contact-popup">
  <img id="x-icon2" src="web%20x%20icon%20white.png">
  <div id="contact-content">
    <a href="mailto:[email protected]" target="_top" class="email"></a>
    
  </div>
</div>
<!-- End Section for Contact Popup -->
    
<!-- Section for Press popup -->
<div id="press-popup">
  <img id="x-icon3" src="web%20x%20icon%20white.png">
  <div id="press-content">
    <a href="mailto:[email protected]" target="_top" class="email"></a>
  </div>
</div>
<!-- End section Press -->
    
<!-- Section for legal popup -->
<div id="legal-popup">
  <img id="x-icon4" src="web%20x%20icon%20white.png">
  <div id="legal-content">
    <a href="mailto:[email protected]" target="_top" class="email"></a>
  </div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
  <img id="x-icon5" src="web%20x%20icon%20white.png">
  <div id="support-content">
    <a href="mailto:[email protected]" target="_top" class="email"></a>
  </div>
</div>
<div id="top-bar">
  <a class="burger-nav"></a>
  <div id="nav-bar">
    <ul>
      <li><a class="nav-list" href="#" id="jobs">Jobs</a></li> 
      <li><a class="nav-list" href="#" id="contact">Contact</a></li>
      <li><a class="nav-list" href="#" id="press">Press</a></li>
      <li><a class="nav-list" href="#" id="legal" id="legal-under">Legal</a></li>
      <li><a class="nav-list" href="#" id="support" id="support-under">Support</a></li>
    </ul>
  </div> 
</div>
<div id="container">
  <div id="background">
  </div>
  <ul id="menu">
  </ul>
  
  <div id="name-div">
    <h1 id="name">Touch</h1>
  </div>
  <ul class="bubbles">
    <li id="firstCircle"></li>
    <li id="secondCircle"></li>
    <li id="thirdCircle"></li>
    <li id="fourthCircle"></li>
    <li id="fifthCircle"></li>
    <li id="sixthCircle"></li>
  </ul>
</div>

Upvotes: 2

Views: 70

Answers (1)

cars
cars

Reputation: 318

Are you trying to add a drop down menu

<!DOCTYPE html>
<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}

/* Popup arrow */ 
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>

</body>
</html>

Upvotes: 1

Related Questions