javascript – one <A> element in footer not responding to hover or clicks-ThrowExceptions

Exception or error:

One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.

HTML OF FOOTER & MENU ELEMENT:

<footer>
  <ul class="social">
    <li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
        target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
    </li>
    <li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
        target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
    <li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
        <i class="fab fa-behance"></i> </a> </li>
    <li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
        target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
        <img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
      </a> </li>
  </ul> 
  <div class="navi-title">
  Navigation
  </div>
  <ul class="navi">  <li class="navi">
        <a href="PLACEHOLDER">
          Home
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Works
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Contact
        </a>
      </li>
  </ul> 
</footer>

CSS FOR FOOTER & MENU ELEMENT:

footer {
  clear: both;
  background-color: #2a7de1;
  text-align: center;
  padding: 2% 0% 1% 0%;
  margin-top: 20%;
  position: relative;
}
footer ul.social li.social {
  list-style: none;
  display: inline;
}
footer > ul.social li.social a {
  text-align: center;
  font-size: 2vw;
  margin: 0% 3% 0% 3%;
  overflow: hidden;
  text-decoration: none;
}
footer > ul.social li.social a .fab {
  color: white;
}
footer > ul.social li.social a:hover .fab {
  transform: scale(1.3);
  transition: 0.3s;
}
.upwork {
  width: 2.2%;
}
.upwork:hover {
  transform: scale(1.3);
  transition: 0.3s;
}
footer > ul.navi li.navi {
  list-style: none;
  margin: 0% 0% 0% 75%; 
  text-align: left;
  padding: 0.3%;
}
.navi-title {
  color: white;
  font-family: 'karla';
  font-size: 1.4vw;
  text-align:left; 
    margin: 0% 0% 0.5% 75%; 
  font-weight: 700;
}
footer > ul.navi li.navi a {
   text-decoration: none;
  color: white;
    font-family: 'karla';
  font-size: 1.2vw;
}
ul.social {
  position: absolute;
  margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}

Codepen: https://codepen.io/daniel-albano/pen/poJydQj?editors=1100

How to solve:

The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn’t look great that way, but it’s somewhere to start.

ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}

###

The issue is with your ul.social in the footer. I looked at it in the inspector.

enter image description here

You can see that it’s overlapping the unreachable link, “Works”.

enter image description here

As a test, I applied display: none to the ul and the “Works” link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.

Leave a Reply

Your email address will not be published. Required fields are marked *