Problems with Clickable Divs in side bar

Question

I've been trying several solutions, but the clickable areas for links in my navigation sidebar aren't where they should be. I'm just looking to get the entire div or even just the text inside to be a link.

http://prelude2cinematestsite.weebly.com/

If you hover at the very top of "home" you'll finally locate one of the links. One of the solutions I attempted very early seemed to finally fix the problem, but then caused the entire sidebar to have scroll for width and push the social media icons down passed the bottom of the screen where they refused to budge. Unfortunately I can't seem to find this solution anymore since it's the only one that actually did what I wanted even if it broke a lot of other things.

There was originally supposed to be drop down menus, but even taking them out didn't seem to help.

And this isn't a problem with Weebly, I've checked that.

Answer 1

You do not need to apply position:absolute to the .sidebar-nav div and the #social div. Make them position: relative. They will automatically fall one below the other just as you need them. Then, remove the excessive padding that you've used on the divs to re-position them.

Currently, since the two are positioned absolutely, the social div is overlapping on top of the .sidebar-nav div and inadvertently preventing you from clicking on the buttons.

Answer 2

Adding a negative z-index to #social in your css file will solve your immediate problem but it looks like you may still have to work on the mobile version of your navigation.