Trouble shoot help needed

.main-nav li a: hover <-- function not working and I cannot figure it out. Please help, its driving me crazy.

.hero {
	position: absolute;

something about that line is messing up your code. i commented it out and the hover feature worked. so you just have to find a way not let position: absolute mess things up

1 Like

Thanks a million :smile:

tried it and it failed, :sob:
Maybe its my browser, what browser do you use friend?

The problem is rather simple.

Your div which has the class name “hero” doesn’t have a close tag. Also!, by making that div absolute, with a width that big,. you’re effectively placing that div on top of your entire website, which is basically causing your cursor to only hover over the hero div.

What exactly is your hero div supposed to do?

If you’re set on keeping the hero div… then add the property
z-index: -1;

and that will place your hero div below everything else. Let me warn you though, this is very hackish.

1 Like

Thanks, I appreciate that. I knew I was off with a div while coding this but couldnt put my finger on it. Had no idea. The hero is really a place holder, my intention is to place a video there but I still wanted to understand where I went wrong. I really appreciate you taking the time to figure it out for me :slight_smile:

Had to remove the .hero H1 altogether. “What a headache”.