Please excuse me if this is the wrong site to post this type of issue to. However, after examining all of the Stack Exchange websites, this looked like the best one to post my question to:

I came across an issue today which I have never encountered before in all my years of web development. I created a hyperlink on a portal website and discovered it didn't work (the hyperlink was there but I couldn't click on it.)

After manipulating my HTML and CSS in different ways, I discovered that when my stylesheet was not applied, the links on the local-page (content local to that page) worked. I looked through all my CSS multiple times and couldn't find any styles that would cause my hyperlinks to become inactive. This portal I mentioned is a small project I am doing hosted on my primary site, but I am using completely different CSS for this portal rather than reusing my main site's CSS. That being said, it isn't that different and still looks very similarly.

When I say local-page, I mean content on that page. For example, the links in my navigation menu worked, but links I put in the main body didn't work,

If someone could let me know if I have CSS that may be causing this issue, that would be most helpful. Just for testing, I created an exact replica of a webpage with hyperlinks and uploaded it to my site.

Page with CSS applied - Local Hyperlinks Don't Work

Page with CSS not applied - Local Hyperlinks Work


As always, any help would be greatly appreciated. Thanks in advance!

  • HTML and CSS are considered "programming related", so is more suited to SO. Your question will be migrated automatically if it is deemed suitable. – MrWhite May 11 '16 at 17:28
  • This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. – John Conde May 11 '16 at 19:20

If a link is mysteriously unresponsive it's often because it is being covered by another element.

.navigation ul {
    position: absolute;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    padding: 0;
    vertical-align: middle;

Your navigation menu (<ul>) at the top is filling your entire page (bottom:0) and covering the links on the page, which is making the links unclickable. You are clicking on the transparent <ul> instead, not the anchor element.

Not the answer you're looking for? Browse other questions tagged or ask your own question.