CODEWITHSUNDEEP
htmlcss
Kev Wragg
Kev Wragg

Reputation: 13

Anchor tag not clickable

Firstly i have tried:

pointer-events: all;

moving anchor tag to navigation bar, which works perfectly !?

Removing the css for all the front page css also gets it working.

I think i has something to do with the position: relative/absolute, however, i require the positioning and i don't know how to proceed, thanks.

.front-page{
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   background-image: url("https://www.transparenttextures.com/patterns/wall-4-light.png");
   z-index: -10;

   &__welcome-text{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      font-size: 40px;
      font-family: 'Playfair Display', serif;
      color: $textColorDark;
      text-align: left;

      & .anchor{
         cursor: pointer;
         z-index: 9999;
      }
   }
}

.right-arrow{
   color: $primary-color;
   font-size: 30px;
   opacity: 1;
   text-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
   animation-name: delay;
   animation-duration: 6s;
}

@keyframes delay{
   0%{
      opacity:0;
   }

   85%{
      opacity:0;
   }

   90%{
      opacity:1;
      transform: translateX(0);
   }

   95%{
      transform: translateX(25px);
   }

   100%{
      opacity:1;
      transform: translateX(0);
   }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <link href="https://fonts.googleapis.com/css?family=Work+Sans|Playfair+Display|Montserrat" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <title>KW Web Development</title>
   </head>
   <body>
      <!-- HEADER -->
      <nav class="navbar">
         <div class="navbar-link__container">
            <a class="navbar-link" href="about.html"><span class="navbar-link-text about-link__animate">About</span></a>
            <a class="navbar-link" href="portfolio.html"><span class="navbar-link-text portfolio-link__animate">Portfolio</span></a>
            <a class="navbar-link" href="blog.html"><span class="navbar-link-text blog-link__animate">Blog</span></a>
            <a class="navbar-link" href="contact.html"><span class="navbar-link-text contact-link__animate">Contact</span></a>
         </div>
      </nav>


         <div class="main-logo__container">
            <a href="#"><div class="main-logo">
               <img class="main-logo__image" src="images/main-logo.png" alt="Main Logo">
            </div></a>
         </div>



         <!-- WELCOME MESSAGE -->
         <div class="front-page">
            <div class="front-page__welcome-text">
               <h1 class="front-page__welcome-text">Hi ;)<br> I'm Kevin,<br>
                I create modern websites <i class="fas fa-arrow-right right-arrow"></i>
             </h1> <br> <br> <br> <br>
               <a class="anchor" href="about.html">hello</a>
            </div>
         </div>


   </body>
</html>

Upvotes: 1

Views: 2004

Answers (1)

Alexis Vandepitte
Alexis Vandepitte

Reputation: 2088

Remove z-index: -10; on the .front-page class. It doesn't do anything and this is the cause of the issue.

Upvotes: 2

Related Questions