title: Why aren't my href links working?
body: <p>I'm a little new to web programming and have looked far and wide trying to fix this problem on my own but for the life of me I cannot figure it out, I greatly appreciate any and all help. </p>
  
  <p>I'm basically making a navigation bar and I attempt to have it link to my other html pages but it's not working. I use the following code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="banner"&gt; &lt;!-- contains main banner and logo --&gt;
      &lt;a href="index.html" id="logo"&gt;
          &lt;img src="images/newlogo.png" alt="blahblah"&gt;
      &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="nav-bar"&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="schedule.html"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="register.html"&gt;Register&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#slideshow"&gt;Contact&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header {
      border-top: 12px solid #9e2630;
      width: 100%;
      background: #fff;
      left: 0;
      top: 0;
      z-index: 200;
      height: 115px;
      margin-bottom: 130px;
  }
  
  header #logo img {
      padding-top: 35px;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  header ul {
      float: left;
      position:relative;
      left:50%;
      min-height: 60px;
      margin-top: 30px;
  }
  
  header ul li {
      margin: 0;
      padding: 0;
      list-style: none;
      float: left;
      position:relative;
      left:-50%;
      /*height: 45px;*/
  }
  
  header ul li a {
      font: normal normal normal 18px/20px 'Century Gothic', sans-serif;
      text-align: center;
      color: #9e2630;
      /*height: 43px;*/
  }
  
  header .nav li a:hover{
      background-color: #9e2630; color:#FFFFFF;
  }
  
  header ul li a.current{
      background-color: #9e2630; color:#FFFFFF;
  }
  </code></pre>
  
  <p>The link in the logo works fine. The link in the contact also work fine, there's no problem when I link to an element on the page. The other four links do not work. I've also tried setting the href to an "http" address but that didn't work either. I've run all of these tests in DreamWeaver's browser preview function (IE and Chrome) as well as on a remote server with no difference in results.  </p>
  
  <p>I also noticed the z-index in the header is set to 200 (this is sample code I'm working with) which I understand plays a role in how elements are layered. I tried fiddling with that to no avail. What do you guys think?</p>
  
  <p>Edit1: here's what my file structure looks like</p>
  
  <p><a href="https://i.imgur.com/OyzDQgy.jpg" rel="nofollow">file structure</a></p>
  
  <p>Also here's the template I've been using</p>
  
  <p><a href="http://www.templatemo.com/preview/templatemo_399_tamarillo" rel="nofollow">template</a></p>
  
  <p>Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js</p>
  
  <p>unfortunately when I disable this file I lose the nice image slider I had on my web page but the links work again, so now I have to fix that :p</p>
  
  <p>Thanks for your help everybody!</p>