I have been struggling to understand why I am unable to click the links in my footer. Even though my CSS may not be perfect, it does serve its purpose. There must be a more efficient way to create a footer that sticks to the bottom of the page and appears behind all other content, but here is what I have so far:
here's my jsfiddle of my issue
Although it may look chaotic in the jsfiddle, the concept is still there. I used a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
This should allow me to click on the links, but they remain unclickable! The solution is likely something simple that I am missing.
Any advice? Is there an easier way to make the footer appear behind all content while extending approximately 300px below everything?
Thank you!
Edit: Special thanks to Kasyx and Andrea Ligios for their assistance. They discovered that it works fine in Firefox but encounters issues in Google Chrome. It seems that the margin-bottom property is causing trouble with .bottomdiv..