Links Are Not Working In Html?

Question

Would someone help me, none of my html links are working and I don't know why? Well the links in the side menu are, but the links on the main page and the logo link don't? I'v added the css to the html because I don't know if it is the html or css causing the problem?

Here's the code:

   $(window).load(function() {
     $("[data-toggle]").click(function() {
       var toggle_el = $(this).data("toggle");
       $(toggle_el).toggleClass("open-sidebar");
     });
     $(".swipe-area").swipe({
       swipeStatus: function(event, phase, direction, distance, duration, fingers) {
         if (phase == "move" && direction == "left") {
           $(".container").addClass("open-sidebar");
           return false;
         }
         if (phase == "move" && direction == "right") {
           $(".container").removeClass("open-sidebar");
           return false;
         }
       }
     });
   });

#headerMenu {
  width: 100%;
  height: 65px;
  background-color: #212021;
  padding: 0px;
  margin: 0px;
  position: fixed;
  z-index: 1;
}
#logo a {
  color: #FFFFFF;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 25px;
  background-color: #212021;
  z-index: 1;
  position: fixed;
  top: 14px;
  left: 10px;
}
#page-content {
  position: absolute;
  top: 100px;
  z-index: 0;
  padding-left: 20%;
  padding-right: 20%;
}
#headerMenu img {
  width: 40px;
  height: 40px;
  background-color: #212021;
  padding-top: 5px;
  position: fixed;
  top: 7px;
  left: 70%;
}
#menu img {
  width: 50px;
  height: 50px;
  background-color: #212021;
  position: fixed;
  top: -2px;
  left: 85%;
}
#search {
  background-color: #FFFFFF;
  margin: 10px;
  padding: 3px;
  color: #424242;
  border: 1px solid #212021;
  border-radius: 10px;
}
body,
html {
  margin: 0px;
  overflow-x: hidden;
  font-family: helvetica;
  font-weight: 100;
}
.container {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  right: 0;
  -webkit-transition: right 0.4s ease-in-out;
  -moz-transition: right 0.4s ease-in-out;
  -ms-transition: right 0.4s ease-in-out;
  -o-transition: right 0.4s ease-in-out;
  transition: right 0.4s ease-in-out;
}
.container.open-sidebar {
  right: 240px;
}
#sidebar {
  background: #313031;
  margin-top: 64px;
  position: absolute;
  width: 200px;
  height: 100%;
  right: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar ul li {
  margin: 0;
}
#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #313031;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
  background: #FFFFFF;
  color: #212021;
  border: 1px solid #313031;
}
.main-content {
  width: 100%;
  height: 100%;
  padding: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: fixed;
}
.main-content .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 60px;
  width: 100%;
}
.main-content #sidebar-toggle {
  background: #212021;
  border-radius: 4px;
  display: block;
  padding: 10px 7px;
  position: fixed;
  top: 13px;
  right: 20px;
  float: right;
}
.main-content #sidebar-toggle .bar {
  display: block;
  width: 20px;
  margin-bottom: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child {
  margin-bottom: 0;
}
/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-width: 250px) and (max-width: 300px) {
  #logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Oxygen", Helvetica, Arial, sans-serif;
    font-size: 23px;
    background-color: #212021;
    position: absolute;
    top: 15px;
    left: 10px;
  }
  #headerMenu img {
    width: 37px;
    height: 37px;
    background-color: #212021;
    position: fixed;
    top: 7px;
    left: 65%;
  }
  #page-content {
    padding-left: 5%;
    padding-right: 5%;
  }
  #sidebar {
    background: #313031;
    margin-top: 64px;
    position: absolute;
    width: 170px;
    height: 100%;
    right: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}
@media only screen and (min-width: 0px) and (max-width: 250px) {
  #logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Oxygen", Helvetica, Arial, sans-serif;
    font-size: 19px;
    background-color: #212021;
    position: fixed;
    top: 17px;
    left: 5px;
  }
  #headerMenu img {
    width: 35px;
    height: 35px;
    background-color: #212021;
    position: absolute;
    top: 7px;
    left: 60%;
  }
  #page-content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .container.open-sidebar {
    right: 250px;
  }
  #sidebar {
    background: #313031;
    margin-top: 64px;
    position: absolute;
    width: 100%;
    height: 280px;
    right: -250px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}
@media only screen and (min-height: 300px) and (max-height: 400px) {
  #sidebar ul li a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 25px;
    font-size: 15px;
    font-weight: 100;
  }
}
@media only screen and (min-height: 0px) and (max-height: 300px) {
  #sidebar ul li a {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    font-size: 13px;
    font-weight: 100;
  }
}

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>




<body id="all">
  <div id="headerMenu">
    <div id="logo">
      <a href="/">Seventy Three</a>
    </div>
  </div>

  <div id="page-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>


  <div class="container">
    <div id="sidebar">
      <ul>
        <form action="/search" mathod="POST">
          <li>
            <input id="search" size=15 type="text" placeholder="search...">
          </li>
        </form>
        <li>
          <hr>
        </li>
        <li><a href="/index.html">Home</a>
        </li>
        <li><a href="/about">About</a>
        </li>
        <li><a href="/projects">Projects</a>
        </li>
        <li>
          <hr>
        </li>
        <li><a href="/register">Login / Sign Up</a>
        </li>
      </ul>
    </div>
    <div class="main-content">
      <div class="swipe-area"></div>
      <a data-toggle=".container" id="sidebar-toggle">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
    </div>
  </div>


</body>

Any help Appreciated.

Answer 1

The issue here is with the z-index of the #page-content.

everything is covering it and the links are not reachable.

try to add the following

 #page-content {
    position: absolute;
    top: 100px;
    z-index: 100;
    padding-left: 20%;
    padding-right: 20%;
}

This will solve your problem

Answer 2

It seems like you're using fixed elements to catch swipes.

This kind of CSS will prevent any clicks to go through.

.container {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
}

The solution is to apply that styling inside of @media, to target only mobile devices, where you need swipes.