CODEWITHSUNDEEP
htmlcssanchor
RasmusGP
RasmusGP

Reputation: 5346

Hard to click anchor tag

I'm trying to make a header, for my webpage. The problem is that the three links, to the left that, I've placed with absolute position, are hard to click. It's like the hitbox is very small. I've tried to increase the padding, and set display to block, but neither did work. Code

HTML:

    <div class="sideheader">
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</div>

<div id="header">
 <h3><a href="index.html">Webpage name</a></h3>
 <hr>
<div id="navbar">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Social Media</a></li>
  </ul>
</div>

CSS:

body,html {
  margin: 0;
  background-color: #ffffff;
  font-family: Verdana, Georgia, serif;
  font-size: 14px;
} 

.sideheader {
  color: #000;
  position: absolute;
  top:0px;
  left:-10px;

}

.sideheader ul {
  color: #000;


}

.sideheader ul li {
  color: #000;
  list-style-type: none;
  padding-top:15px;
}

.sideheader ul li a {
  color: #fff;
  text-decoration: none;
}



#header {
  margin: 10;
  background-color: #5c755e;
  height: 120px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 2px 2px 2px #888888;
} 

#header h3 a{
  text-decoration: none;
  color: #fff;

}

#header hr{
  margin-top: 30px;
  width: 400px;
}

Upvotes: 0

Views: 384

Answers (2)

Akul Von Itram
Akul Von Itram

Reputation: 1534

Add z-index:1; to .sideheader.

.sideheader {
  color: #000;
  position: absolute;
  top:0px;
  left:-10px;
  z-index:1; /* add this */
}

Here is updated fiddle; https://jsfiddle.net/3x00fzjf/5/.

Upvotes: 2

Ahs N
Ahs N

Reputation: 8366

Replace this:

.sideheader {
  color: #000;
  position: absolute;
  top:0px;
  left:-10px;
}

by this:

.sideheader {
  color: #000;
  position: absolute;
  top:0px;
  left:-10px;
   z-index:1;
}

Here is the updated JSFiddle

Basically you add z-index to make it the top layer among the other elements, and hence it becomes clickable again :)

Upvotes: 3

Related Questions