Image in header blocking link in nav bar - html

Question

I got an image in the middle of my navbar which is blocking my link, I made a bit of code below to show that. I tried to fix this with z-index's but it keeps blocking my link.
I can't place the image in the nav bar itself because of the rest of my code (which is not in this snippet). I think it should be solved if I get the absolute image behind the <a> but I can't get that done with z-index's
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<img src="http://lorempixel.com/160/90" class="headerlogo">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>

Answer 1

use this
nav{
z-index:9;}
img.headerlogo{
z-index:-1;
opacity:0.5;
}
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
z-index:9;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
z-index:-1;
opacity:0.5;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<ul>
<img src="http://lorempixel.com/160/90" class="headerlogo">
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>

Answer 2

Put img tage outside and change css for class headerlogo
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: relative;
width: 15%;
height: 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<img src="http://lorempixel.com/160/90" class="headerlogo">
<article>
</article>

Answer 3

Give z-index:-1 to z-index: 1; and z-index:1; position:relative; to nav.
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
z-index: 1;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
position: relative;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<img src="http://lorempixel.com/160/90" class="headerlogo">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>