CODEWITHSUNDEEP
htmlcss
Matt Wallis
Matt Wallis

Reputation: 33

Clickable area of link in wrong place

I wanted to implement links to twitter and instagram to my Nav bar however when I added the links using normal tags the clickable area wasn't directly on the icons, it was to the right or the bottom. Is there anyway I can make the link area directly on the icon?

.nav{
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav{
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a{
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote{
  font-size: 10px;
  top: 5px;
  position: absolute;
left: 0;
right: 0;
color: #000;
}

.fa-instagram{
  position: relative;
  float: right;
}

.fa-twitter{
  position: relative;
  float: right;
}
<div class="top-nav">
      <div class="nav-wrapper">
          <a href="https://www.instagram.com/ntvcreative/" target="_blank">
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>
          <a href="https://www.instagram.com/ntvcreative/" target="_blank">
          <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>
            <p class="quote">'Everyone's Born Native'</p>
      </div>
  </div>
  
  
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Upvotes: 1

Views: 122

Answers (1)

showdev
showdev

Reputation: 29168

The absolutely positioned <p> element overlaps and prevents mouse access to the icons.
One solution is to move the <p> before the <a> elements in the HTML code.

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  font-size: 10px;
  top: 5px;
  position: absolute;
  left: 0;
  right: 0;
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}
<div class="top-nav">
  <div class="nav-wrapper">
    <p class="quote">'Everyone's Born Native'</p>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Other solutions include:

Remove the left positioning from the <p> element:

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  font-size: 10px;
  top: 5px;
  position: absolute;
  left: 0;
  /*right: 0; REMOVED*/
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}
<div class="top-nav">
  <div class="nav-wrapper">
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
    <p class="quote">'Everyone's Born Native'</p>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Float the <p> element left:

.nav {
  z-index: 1;
  top: 0;
  position: absolute;
  height: 120px;
  width: 100%;
  max-width: 100%;
}

.top-nav {
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 40px;
  border-bottom: solid 1px #efefef;
  background: #fff;
  z-index: 2;
}

.top-nav a {
  top: 13px;
  position: relative;
  float: right;
  padding-right: 22px;
}

.top-nav .quote {
  float: left;
  font-size: 10px;
  color: #000;
}

.fa-instagram {
  position: relative;
  float: right;
}

.fa-twitter {
  position: relative;
  float: right;
}
<div class="top-nav">
  <div class="nav-wrapper">
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-instagram" aria-hidden="true"></i>
    </a>
    <a href="https://www.instagram.com/ntvcreative/" target="_blank">
      <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
    <p class="quote">'Everyone's Born Native'</p>
  </div>
</div>


<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Upvotes: 3

Related Questions