Image covering links - html

Question

I am stumped on the following. I just added a logo to a site and for some reason, my nav panel links that are to the right of the logo/image are now not clickable. It appears that the image is somehow over-taking them, but I do not see how. In the console/inspect it doesn't show the image over-taking them?
Does anyone see why this is happening?
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>

Answer 1

I don't understood whay you have give position:absolute to logo but, add z-index: -1; to .logo will make your link clickable..
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
z-index: -1;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
Edit:
Other solution is give display: block; to .logo a will work. Fiddle

Answer 2

The image is not overtaking them but the <div> the image is sitting in is. It's full width so you have a transparent div sitting on top of your navbar. Limit the width of your logo container, use a span instead or float it as suggestions.

Answer 3

Check that the z-index of the image is below the z-index of the links.

Answer 4

You don't really need to use position: absolute;. Instead use display:inline or inline-block and avoid overlapping.
You CSS would look like this:
.nav-list {
display:inline; /* Add this */
margin: 0;
/* width:100%; you can remove this */
list-style: none;
text-align: right;
padding: 0;
}
.logo {
display:inline; /* add this*/
margin-top: -15px;
cursor: pointer;
/* z-index: -1; no need for z-index */
}
JsFiddle