Can someone please tell me why I can't click on my anchor tags?
I have attached my code on a jsfiddle. Just scroll down in the output box. It doesn't show right on there because the image is missing. https://jsfiddle.net/ydntL72f/1/
I have messed around with the z-index css property but can't see to get it to work with that.
@font-face {
font-family: 'Gotham';
src: url("Control Panel/Appearance and Personalization/Fonts/Gotham XLight");
}
@font-face {
font-family: 'Prime';
src: url(../fonts/Prime-Regular.ttf);
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-family: 'Gotham';
}
/* Count Down Timer */
.bgimg {
background: url(../img/background-image.jpg);
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #000;
font-family: 'Prime';
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 20px 100px;
}
#logo {
width: 100px;
}
h1 {
font-size: 40px;
letter-spacing: 30px;
font-weight: 100;
text-shadow: 5px white;
}
#demo {
font-weight: lighter;
word-spacing: 20px;
}
hr {
margin: auto;
width: 80%;
border: 1.5px solid #000;
}
/* Nav Bar */
header {
width: 100%;
height: 100vh;
background: url(../img/background-image.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 90%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
position: fixed;
float: left;
margin: 16px 36px;
color: #fff;
font-weight: bold;;
font-size: 24px;
}
nav {
position: fixed;
width: 100%;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
z-index: 1;
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 760px) {
/* Nav Bar */
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home | Tyler Kautz</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li><a href="index-new.html"></a>Home</li>
<li><a href="index-new.html"></a>About</li>
<li><a href="index-new.html"></a>Blog</li>
<li><a href="index-new.html"></a>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
</p>
</div>
</div>
<script type="text/javascript">
// Menu Toggle-Button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
});
</script>
</body>
</html>Clickable anchor tags.
Your links do not contain anything to click on - it's just empty.
<li><a href=""></a>About</li>
<li><a href=""></a>Blog</li>
<li><a href=""></a>Contact</li>
As you can see there isn't anything in-between the opening and closing <a> tag.
Better do it like this:
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>