Dragan Peric Dragan Peric - 5 months ago 22
CSS Question

Menu items not clickable

I have menu div inside cover div and when i try to click it i cant. I tried also with z-index:-1 for cover and nothing happens. When i put something out of cover div i can click it.

#cover {
position:relative;
margin:auto;
width:100%;
height:800px;
z-index: -1;
background-image: url('pozadinaa.png');
background-size: cover;
}

#meni {
position:absolute;
width: auto;
font-size:50px;
cursor:pointer;
color:white;
right:4%;
top:5%;
}

Answer

Remove z-index (you are setting this for #cover, so #menu is also affected by this).

#cover {
  position: relative;
  margin: auto;
  width: 100%;
  height: 200px;
  background-image: url('pozadinaa.png');
  background-size: cover;
}
#cover.zindex {
  z-index: -1;
}
#menu {
  position: absolute;
  width: auto;
  font-size: 50px;
  cursor: pointer;
  color: white;
  right: 4%;
  top: 5%;
}
<h1>Clickable</h1>
<div id="cover">cover
  <div id="menu">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
  </div>
</div>
<h1>Not clickable (z-index = -1)</h1>
<div id="cover" class="zindex">cover
  <div id="menu">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
  </div>
</div>