Thecodingexpert112 Thecodingexpert112 - 9 months ago 31
HTML Question

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:support@magictouchapp.com" 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:support@magictouchapp.com" 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:support@magictouchapp.com" 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:support@magictouchapp.com" 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:support@magictouchapp.com" 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>




Answer Source

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>