Navigation bar links are not clickable on website - html

Question

The links on my site are not clickable.. I built another site earlier this year and made it work how I wanted, so I just copied that code.
<div id="links">
<div class="wrap">
<ul id="navigation">
<li>HOME</li>
<li>FRESHMAN</li>
<li>SOPHOMORE</li>
<li>JUNIOR</li>
<li>SENIOR</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Document ready shorthand statement
$(function() {
$('.link').click(function() {
var id = $(this).attr('href');
$('html,body').animate({ scrollTop: $(id).offset().top }, 'slow');
// Prevent default behavior of link
return false;
});
});
</script>
</div>
<div id="atlanta1">
</div>
<div id="atlanta2">
</div>
<div id="atlanta3">
</div>
<div id="atlanta4">
</div>
<div id="stoneMountain">
</div>
I have blank divs just because I have them there at specific heights so the links will take me to different heights on the page. This is how I set up the style, for the links and for the divs
<style>
#links {background-color: black;
background-color: rgba(0, 0, 0, 0.9);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
z-index:0}
#navigation {list-style: none; padding: 1; margin: 18px 0px ; color: white; text-align: center;}
#navigation li {display: inline;}
#navigation li #space {margin-right:150px;}
#navigation a {color: inherit; text-decoration: inherit;}
#header, #footer {width:100%; float:left;}
#navigation li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
.wrap {position:relative; margin:0 auto; width:100%;}
#atlanta1 {
position:absolute;
top:0px;
height: 1000px;
z-index: -0
}
#atlanta2 {
position:absolute;
top:1000px;
height: 1000px;
z-index: -0
}
#atlanta3 {
position:absolute;
top:2000px;
height: 1000px;
z-index: -0
}
#atlanta4 {
position:absolute;
top:3000px;
height: 1000px;
z-index: -0
}
#stoneMountain {
position:absolute;
top:4000px;
height: 1000px;
z-index: -0
}
</style>
I've been stuck here for a while and don't really see whats wrong, but the links aren't clickable.

Answer 1

Im not sure what you mean by the links are not clickable.
I mean your divs have no width for a start so its there is no divs for the Javascript to scroll to. I gave them a width and seems to work ok....
Example of giving a width:
#atlanta1 {
position:absolute;
top:0px;
height: 1000px;
width: 100px; // Width!
z-index: -0;
}
Working Example Here
As you can see the links are clickable and work.
Note: I only gave a width to a few.
I think I know what your talking about now, I think its because you are using z-index. Some of the divs are going above the header. You could try something like.
z-index:9999;
Put that in the header or as you have called it #links.
DEMO HERE
Fully working version:
DEMO HERE
Another update:
Right its because of this:
ul li {
list-style:none;
overflow:hidden;
height:1000px;
position: relative;
z-index:-2;
}
See how you are pushing the list behind the header. Set it to 9 or something and it will comeback to the front. You may want to look up what z-index does.
ul li {
list-style:none;
overflow:hidden;
height:1000px;
position: relative;
z-index:9;
}
Working Demo