Links are not clickable due to CSS?

Question

I am having an issue where the links in my nav bar are not clickable unless I remove some CSS I've added.

Here is the snippet of CSS I need to remove to have clickable links:

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

It seems to be related to float: right; because if I disable just that phrase the links become clickable.

 { margin: 0; padding: 0; } header { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG); height: 100vh; background-size: cover; background-position: center; }.main-nav { float: right; list-style: none; margin-top: 30px; }.main-nav li { display: inline-block; }.main-nav li a { color: white; text-decoration: none; padding: 5px 20px; font-family: "Roboto", sans-serif; font-weight: bold; }.main-nav li.active { border: 1px solid white; }.main-nav li a:hover { border: 1px solid white; }.logo { width: 150px; height: auto; float: left; color: white; font-size: 20px; } body { font-family: monospace; }.row { max-width: 1200px; margin: auto; }.hero { position: absolute; width: 1200px; margin-left: 0px; margin-top: 0px; } h1 { color: white; text-transform: uppercase; font-size: 70px; text-align: center; margin-top: 275px; } h2 { color: white; text-transform: uppercase; font-size: 35px; text-align: center; }.button { margin-top: 30px; margin-left: 440px; }.btn { border: 1px solid white; padding: 10px 30px; color: white; text-decoration: none; margin-right: 5px; font-size: 13px; text-transform: uppercase; }.btn-one { background-color: darkorange; font-family: "Roboto", sans-serif; }.btn-two { background-color: darkorange; font-family: "Roboto", sans-serif; }.btn-two: hover { background-color: darkorange; }

 <header> <div class="row"> <div class="logo"> </div> <ul class="main-nav"> <li class="active"><a href="">Home</a></li> <li><a href="about.html">Learn More</a></li> <li><a href="zombies.html">Real Zombies</a></li> <li><a href="ordinance.html">Guns and Ammo</a></li> <li><a href="news.html">The Latest</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> <div class="hero"> <h1> Real Zombie Vs. Human Battles </h1> <h2> Choose your side..</h2> <div class="button"> <a href="" class="btn btn-one">Zombies</a> <a href="" class="btn btn-two">Humans</a> </div> </div>

Thank you in advance for any help. I'm sure I'm missing something simple but I can't find it anywhere.. I searched around on here and couldn't find anything specifically that addressed this issue. Help!

Answer 1

try changing your css to

.main-nav
{
     float: right;
     list-style: none;
     margin-top: 30px;
     position: relative;
     z-index: 10;
}

z-index should fix the issue. (but it wouldn't work without position set to relative)

for more information check out this link: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

.hero in position:absolute overlaps header , you can bring your links on top of it via position:/* any value but static */ + z-index

a {
  position:relative;
  z-index:1;
}

demo:

 { margin: 0; padding: 0; } header { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(zomb2.PNG); height: 100vh; background-size: cover; background-position: center; }.main-nav { float: right; list-style: none; margin-top: 30px; }.main-nav li { display: inline-block; }.main-nav li a { color: white; text-decoration: none; padding: 5px 20px; font-family: "Roboto", sans-serif; font-weight: bold; position:relative; z-index:1; }.main-nav li.active { border: 1px solid white; }.main-nav li a:hover { border: 1px solid white; }.logo { width: 150px; height: auto; float: left; color: white; font-size: 20px; } body { font-family: monospace; }.row { max-width: 1200px; margin: auto; }.hero { position: absolute; width: 1200px; margin-left: 0px; margin-top: 0px; } h1 { color: white; text-transform: uppercase; font-size: 70px; text-align: center; margin-top: 275px; } h2 { color: white; text-transform: uppercase; font-size: 35px; text-align: center; }.button { margin-top: 30px; margin-left: 440px; }.btn { border: 1px solid white; padding: 10px 30px; color: white; text-decoration: none; margin-right: 5px; font-size: 13px; text-transform: uppercase; }.btn-one { background-color: darkorange; font-family: "Roboto", sans-serif; }.btn-two { background-color: darkorange; font-family: "Roboto", sans-serif; }.btn-two: hover { background-color: darkorange; }

 <header> <div class="row"> <div class="logo"> </div> <ul class="main-nav"> <li class="active"><a href="">Home</a></li> <li><a href="about.html">Learn More</a></li> <li><a href="zombies.html">Real Zombies</a></li> <li><a href="ordinance.html">Guns and Ammo</a></li> <li><a href="news.html">The Latest</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> <div class="hero"> <h1> Real Zombie Vs. Human Battles </h1> <h2> Choose your side..</h2> <div class="button"> <a href="" class="btn btn-one">Zombies</a> <a href="" class="btn btn-two">Humans</a> </div> </div>