html - Links aren't clickable after using parallax scrolling -

html - Links aren't clickable after using parallax scrolling -

i've been making website school , thought i'd figure out how parallax scrolling works. i've started simpelest tutorial precise one. after doing placed navigation bar in. remember worked fine @ time after working allot on responsiveness didn't check , can't click on links anymore. html:

<div id="group2" class="parallax_group"> <!-- <div class="parallax_layer parallax_layer-back"> background </div> --> <div class="parallax_layer parallax_layer-base"> <div id="nav" class="nav"> <ul> <li><a class="active" href="#">home</a></li> <li><a href="about.html">over ons</a></li> <li><a href="#">wat leveren wij?</a></li> <li><a href="#">contact</a></li> <li><a href="#">demo</a></li> </ul> </div> <div class="section group"> <div class="col span_1_of_3"> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. quibusdam id nam, necessitatibus @ odit nobis vitae, dolor sequi sunt doloremque minima, debitis. sed debitis possimus esse soluta mollitia est culpa.</p> </div> <div id="middle" class="col span_1_of_3"> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p> </div> <div class="col span_1_of_3"> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. provident voluptatibus, quaerat nostrum ullam distinctio praesentium! nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p> </div> </div> </div> </div>

and css:

* { padding: 0; margin: 0; } body { text-align: center; } h1{ display: inline-block; font-family: 'raleway', sans-serif; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } p{ display: inline-block; font-family: 'raleway', sans-serif; color: black; } header { z-index: 5; line-height: 100vh; } header .parallax_layer-back { background: url(sample.jpg); background-size: contain; background-repeat: no-repeat; } #group2 { z-index: 3; } #group2 .parallax_layer-base { background-color: #dbdbdb; } .parallax { perspective: 300px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax_layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax_layer-base { transform: translatez(0px); z-index: 4; } .parallax_layer-back { transform: translatez(-300px) scale(2); z-index: 3; height: 150vh; } .parallax_layer-deep{ transform: translatez(-600px) scale(3); z-index: 2; background-color: #dbdbdb; } .parallax_group { position: relative; height: 100vh; transform-style: preserve-3d; /*transform: translate3d(700px, 0, -800px) rotatey(30deg);*/ } /*columns*/ /* sections */ .section { clear: both; padding: 0px; margin: 0px; } /* column setup */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* grouping */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* ie 6/7 */ } /* grid of 3 */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.1%; } .span_1_of_3 { width: 32.2%; } #middle{ border-top: 0px; border-bottom: 0px; border-right: 1px; border-left: 1px; border-style: solid; } /*navigation*/ .nav { position: sticky; top: 0px; height: 100px; width: 100%; z-index: 30; font-family: 'raleway', sans-serif; font-size: 20px; background-color: #dbdbdb; } .nav ul { list-style-type: none; margin-left: 0; padding-top: 40px; font-size: 25px; font-family: 'raleway', sans-serif; line-height: 0; z-index: 30; } .nav li { display: inline-block; margin-left: 15px; padding-bottom: 25px; z-index: 30; } a:link { color: #2f649b; font-family: inherit; } a:visited { color: #2f649b; } a:hover { color: #6d92b9; text-decoration: none; } a:active { color: #26507c; text-decoration: none; } footer { position: sticky; bottom: 0px; height: 100px !important; line-height: 100px; width: 100%; }

i know it's allot of code have no thought went , gone ahead , gave everything. edit: other html parallax group:

<!doctype html> <html> <head> <title>squirel webdesign</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="handheld.css" media="screen , (max-device-width: 480px), screen , (max-width: 480px)"> </head> <body> <div class="parallax"> <header class="parallax_group"> <div class="parallax_layer parallax_layer-base"> <h1>i'm bloody big header preferably squirel</h1> </div> <div class="parallax_layer parallax_layer-back"> </div> <div class="parallax_layer parallax_layer-deep"> </div> </header>

html css hyperlink