Why aren't my href links working?

Question

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.

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.

HTML

<header>
    <div class="banner"> <!-- contains main banner and logo -->
    <a href="index.html" id="logo">
        <img src="images/newlogo.png" alt="blahblah">
    </a>
    </div>
    <div id="nav-bar">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="register.html">Register</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#slideshow">Contact</a></li>
         </ul>
    </div>
</header>

CSS

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;
}

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.

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?

Edit1: here's what my file structure looks like

file structure

Also here's the template I've been using

template

Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js

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

Thanks for your help everybody!

Answer 1

From the plugin's documentation , by default it will override all links, which is clearly not what you want here. However there is a filter option which can override this behavior:

'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (eg ':not(.external)')

Therefore I suggest adding a class to all the links you don't want to be single-page-nav-ized, then initializing with the filter option:

HTML

<header>
    <div class="banner"> <!-- contains main banner and logo -->
    <a href="index.html" id="logo">
        <img src="images/newlogo.png" alt="blahblah">
    </a>
    </div>
    <div id="nav-bar">
        <ul class="nav">
            <li><a href="index.html" class="external">Home</a></li>
            <li><a href="schedule.html" class="external">Schedule</a></li>
            <li><a href="register.html" class="external">Register</a></li>
            <li><a href="about.html" class="external">About</a></li>
            <li><a href="#slideshow">Contact</a></li>
         </ul>
    </div>
</header>

JavaScript

$(document).singlePageNav({filter: ':not(.external)'});

Answer 2

Give proper path to your pages

        <li><a href="/pathtopage/index.html">Home</a></li>
        <li><a href="/pathtopage/schedule.html">Schedule</a></li>
        <li><a href="/pathtopage/register.html">Register</a></li>
        <li><a href="/pathtopage/about.html">About</a></li>
        <li><a href="#slideshow">Contact</a></li>

Answer 3

be sure that all your .html pages in the correct folder. As for now you are linking to html pages in the same folder, so if you dont have them there , you wont be able to open them like this. you have to navigate to the other links from your index.html. Ill explain: if you have a folder "sites" and you have all your .html documents there, it should work the way you did. BUT if in your folder "sites" you only have your index.html and the other sites are in a subfolder "sub-sites" you will have to navigate there first. As posted in answer no. 1