My <a> tag won't work?

Question

this is my first website in HTML and I have a little problem. In the "about me" section, there are three hyperlinks that do not work (i cant click them). But, the ones in the drop down menu work. Any idea why?

Here is my code https://jsfiddle.net/2hkhmLef/

<p>
                  I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
                  2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
                  has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
                  and I learn things that interest me. The ultimate goal right now is to graduate and this website will
                  be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
                  them in the <a href="#port_section" class = "intro_link">portfolio</a> section. For my personal weekly activities, you can find out what I've been
                  up to in the <a href="#" class = "intro_link">activities</a> section. Finally, if you are ever interested in checking out my other social
                  networks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class = "intro_link">contacts</a> section.
</p>

Answer 1

This is a css issue, you got .menu class with attribute height: 100vh; and this covers the whole page, so when you clicking on that link, you are not clicking that link but clicking the menu div that on top of it, so that is why you can't click it.

Answer 2

As @Dave already covered margin in his answer, I would like to add one additional suggestion to make your <a> work as button.

li a{
  display:block;
  padding:10px;
}

li{
  padding:0 !important;
}

You need to add to your specific classes.

And this is for your <a> not working issue.

.menu{
  height: arbitary // As per your requirement.
}

@font-face {
  src: url(Gravity-Light.otf);
  font-family: Gravity;
}


/* ------------------HOME---------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

.menu {
  width: 100%;
  height: 100vh;
}

.homeImg {
  background-image: url(img/web_bg.jpg);
  height: 100%;
  background-position: 30% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.homeImg h1 {
  color: white;
  text-shadow: 2px 2px 9px black;
  font-family: Gravity;
  font-weight: 1000;
  font-size: 75px;
  position: absolute;
  top: 38%;
  left: 70%;
  transform: translateX(-50%) translateY(-50%);
}

.homeImg h2 {
  font-family: Gravity;
  font-weight: 100;
  font-size: 35px;
  position: absolute;
  top: 65%;
  left: 68.1%;
  transform: translateX(-50%) translateY(-50%);
}


/* ------------------ABOUT ME---------------------------- */

.aboutMe {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.aboutMe p {
  font-family: Gravity;
}

.aboutMe h1 {
  color: #212529;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #212529;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

#front-name {
  font-weight: 1000;
  font-family: Gravity;
  font-size: 50px;
  letter-spacing: 3px;
  position: absolute;
  top: 42%;
  right: 5%;
  transform: translate(-50%, -50%);
}

#front-subtitle {
  font-family: Gravity;
  font-size: 25px;
  font-weight: 200;
  position: absolute;
  top: 52%;
  right: 8.25%;
  transform: translate(-50%, -50%);
}

#home:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#portfolio:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#activity:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#contact:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#welcome_msg {
  text-align: center;
}

.intro_link {
  text-decoration: none;
  color: #4a69bd;
}

.intro_link:hover {
  color: red;
}

.content {
  font-family: Gravity;
}


/* ------------------PORTFOLIO---------------------------- */

.portfolio {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.portfolio_title {
  text-align: center;
  color: #212529;
}


/* ------------------MEDIA---------------------------- */


/* MENU SECTION */

@media(max-width: 1024px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #212529;
  }
  nav.black ul {
    background: #212529;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}


/*IPHONES*/

@media only screen and (max-width: 414px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 40px;
    position: absolute;
    top: 30%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/*IPAD*/

@media only screen and (min-width: 415px) and (max-width: 768px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 45px;
    position: absolute;
    top: 33%;
    left: 74%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/*IPAD PRO*/

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 75px;
    position: absolute;
    top: 38%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/* INTERNET RE-SZIE */

.menu {
  height: 30px;
}

li a {
  display: block;
  padding: 10px;
}

li {
  padding: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
  <!-- Menu -->
  <div class="menu" id="home_section">
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>

      <div class="logo">
        MOHANAD ARAFE
      </div>

      <div class="menu">
        <ul>
          <li id="home"><a href="#home_section">Home</a></li>
          <li id="portfolio"><a href="#port_section">Portfolio</a></li>
          <li id="activity"><a href="#">Activities</a></li>
          <li id="contact"><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <!-- Home Text -->
    <div class="homeImg">
      <h1>MOHANAD ARAFE</h1>
      <h2>current software engineering student & self-taught programmer</h2>
    </div>
  </div>

  <!-- About Me -->
  <div class="aboutMe">
    <h1 id="welcome_msg">Welcome to my personal website!</h1>
    <p>
      In here, you will find out everything about me. You can scroll down to discover more about my portfolio, my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself!
    </p>
    <p>
      I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my 2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience has been wonderful. I meet great people that share similar interests,
      my network is growing day-by-day and I learn things that interest me. The ultimate goal right now is to graduate and this website will be used to explore everything I learn as I go. For my school assignments and personal projects, you can find them
      in the <a href="#port_section" class="intro_link">portfolio</a> section. For my personal weekly activities, you can find out what I've been up to in the <a href="#" class="intro_link">activities</a> section. Finally, if you are ever interested
      in checking out my other social networks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class="intro_link">contacts</a> section.
    </p>
  </div>

  <!-- Portfolio -->
  <div class="portfolio" id="port_section">
    <h1 class="portfolio_title">Portfolio</h1>
  </div>

  <script type="text/javascript">
    // Menu-toggle button
    $(document).ready(function() {
      $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
      });
    });
    // Scrolling Effect
    $(window).on("scroll", function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
  </script>

  <script>
    // Select all links with hashes
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });
          }
        }
      });
  </script>

</body>

Answer 3

Your .menu has height: 100vh and is inside of a nav with position: fixed, so it always takes up 100% of the viewport, so when you click, you are always clicking on the .menu.

If you change the css to:

https://jsfiddle.net/2hkhmLef/1/

.menu {
  width: 100%;
  height: 92px;
  margin-bottom: 100vh;
}

it still pushes the content down, and it then doesn't block the links.

I can't see the image in your html, so I can't help with that, but, and this is super hacky and I don't recommend it, but if you just need the links to be clickable:

.menu {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.menu ul {
    pointer-events: all;
}

Will fix the issue as well.

Answer 4

The problems here is you set the height to take up the whole viewport 100vh. This should fix it.

.main {
 width: 100%;
 height: 100%;