Non-clickable links

Navigation
-1
Hello, I'm creating the home of a website that has a full screen video that automatically plays but with the full screen video even with z-index the links are not clickable as you can see, how do I to solve this? 

		*{
			margin: 0;
			padding: 0;
		}
		.bloco{
			width: 100vw;
			height: 100vh;
			justify-content: center;
			align-items: center;
			display: flex;
		}
		.links{
			width: 100%;
			height: 50px;
			z-index: 100;
			position: fixed;
			display: flex;
		}
		.links label{
			z-index: 101;
			padding: 10px 0;
			flex-grow: 1;
			cursor: pointer;
			transition: all .4s;
			text-align: center;
			font-family: 'Arial';
			font-size: 100%;
			color: #fff;
		}
		.links label:hover{
			background-color: rgba(255,255,255,.2);
		}
		.scroll input{
			display: none;
		}
		#home{
			background-color: #7fbd42;
		}
		#login{
			background-color: #7c2096;
		}
		#register{
			background-color: #414950;
		}
		#contact{
			background-color: #aaa;
		}
		#news{
			background-color: #7fbd42;
		}
		.scroll{
			display: flex;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
		}
		.sections{
			transition: all .4s;
		}
		#rd_login:checked ~ .sections{
			margin-top: -100vh;
		}
		#rd_register:checked ~ .sections{
			margin-top: -200vh;
		}
		#rd_contact:checked ~ .sections{
			margin-top: -300vh;
		}
		#rd_news:checked ~ .sections{
			margin-top: -400vh;
		}
		#bg{
			position: fixed;
			right: 0;
			bottom: 0;
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			background-cover: cover;
		}
		#content{
			position: absolute;
			top: 20px;
			padding: 30px;
			color: #fff;
			text-shadow: #000 2px 2px 2px;
			font-family: Arial;
		}
<nav class="links">
	<label for="rd_pi">Pagina Inicial</label>
	<label for="rd_login">Login</label>
	<label for="rd_register">Registrar-me</label>
	<label for="rd_contact">Entrar em Contato</label>
	<label for="rd_news">Novidades</label>
</nav>
<div class="scroll">
	<input type="radio" name="grupo_menu" id="rd_pi" checked="true">
	<input type="radio" name="grupo_menu" id="rd_login">
	<input type="radio" name="grupo_menu" id="rd_register">
	<input type="radio" name="grupo_menu" id="rd_contact">
	<input type="radio" name="grupo_menu" id="rd_news">
<section class="sections">
	<section class="bloco" id="home">
	<video id="bg" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"autoplay="" loop="true"></video>
	</section>
	<section class="bloco" id="login"></section>
	<section class="bloco" id="register"></section>
	<section class="bloco" id="contact"></section>
	<section class="bloco" id="news"></section>
</section>
</div>

I'm following the following tutorial: TUTORIAL

    
asked by anonymous 14.06.2018 / 11:00

2 answers

0

Your main problem was that you were using position:fixed in the video, it does not have much to do with label , link or any of that ...

See what I now put with position:absolute and it worked.

OBS: Here it does not work right because the Snippet of Stackoverflow is too narrow, but on your page it will work fine. 

*{
        margin: 0;
        padding: 0;
    }
    .bloco{
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .links{
        width: 100%;
        height: 50px;
        z-index: 100;
        position: fixed;
        display: flex;
    }
    .links label{
        z-index: 101;
        padding: 10px 0;
        flex-grow: 1;
        cursor: pointer;
        transition: all .4s;
        text-align: center;
        font-family: 'Arial';
        font-size: 100%;
        color: #fff;
    }
    .links label:hover{
        background-color: rgba(255,255,255,.2);
    }
    .scroll input{
        display: none;
    }
    #home{
        background-color: #7fbd42;
        position: relative;
    }
    #login{
        background-color: #7c2096;
    }
    #register{
        background-color: #414950;
    }
    #contact{
        background-color: #aaa;
    }
    #news{
        background-color: #7fbd42;
    }
    .scroll{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .sections{
        transition: all .4s;
    }
    #rd_login:checked ~ .sections{
        margin-top: -100vh;
    }
    #rd_register:checked ~ .sections{
        margin-top: -200vh;
    }
    #rd_contact:checked ~ .sections{
        margin-top: -300vh;
    }
    #rd_news:checked ~ .sections{
        margin-top: -400vh;
    }
    #bg{
        min-width: 100%;
        min-height: 100%;
        position: absolute;
    }
    #content{
        position: absolute;
        top: 20px;
        padding: 30px;
        color: #fff;
        text-shadow: #000 2px 2px 2px;
        font-family: Arial;
    }
<nav class="links">
    <label for="rd_pi">Pagina Inicial</label>
    <label for="rd_login">Login</label>
    <label for="rd_register">Registrar-me</label>
    <label for="rd_contact">Entrar em Contato</label>
    <label for="rd_news">Novidades</label>
</nav>
<div class="scroll">
    <input type="radio" name="grupo_menu" id="rd_pi" checked="true">
    <input type="radio" name="grupo_menu" id="rd_login">
    <input type="radio" name="grupo_menu" id="rd_register">
    <input type="radio" name="grupo_menu" id="rd_contact">
    <input type="radio" name="grupo_menu" id="rd_news">
    <section class="sections">
        <section class="bloco" id="home">
            <video id="bg" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"autoplay="" loop="true"></video>
        </section>
        <section class="bloco" id="login"></section>
        <section class="bloco" id="register"></section>
        <section class="bloco" id="contact"></section>
        <section class="bloco" id="news"></section>
    </section>
</div>
    
14.06.2018 / 17:55
0

Instead of using a label use a a href

Here's an example to understand 

<a href="https://www.w3schools.com">Visit W3Schools</a>
    
14.06.2018 / 11:26
What size should I use for 3d models imported into Unity 3D? datagridview does not fill in the fields (Windows Form) - C # - Visual Studio Comunnity 2015