Button links on Wordpress front page are not clickable - css

Question

I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.

Answer 1

I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});

Answer 2

I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!

Answer 3

as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">