We Keep Coding

Is there a way to close my active navbar wherever I click on screen?

I made a working desktop navbar (it looks like Apple's), but I don't know how can I make it close wherever I click on screen to search-bar when the search bar is active. I googled everything but nothing seem to work, also did an inspect element on Apple.com, but nothing seem to work. Also did some jquery, not even that. I don't have any assumptions for what it could be wrong.Here is my code.
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}
```
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.active{
transition: .5s;
transform: scale(1);
}
.n1.active{
transition-delay: 0.0005s!important;
}
.n2.active{
transition-delay: 0.0025s!important;
}
.n3.active{
transition-delay: 0.005s!important;
}
.n4.active{
transition-delay: 0.025!important;
}
.n5.active{
transition-delay: 0.05s!important;
}
.n6.active{
transition-delay: 0.1s!important;
}
.n7.active{
transition-delay: 0.15s!important;
}
.n8.active{
transition-delay: 0.2s!important;
}
.n9.active{
transition-delay: 0.25s!important;
}
.n10.active{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('active')
$('.search').focus();
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('active')
})
})
</script>
</body>
</html>
Help would be really appreciated.

Don't know why, but straight focus() not working, probably because of visibility: hidden.
But, if you add setTimeout it works great and smooth, check it on JSFiddle

After testing this, it looks to me like the .focus() is calling before the input is visible again, due to the transition-delay css rule on .searchbox.active. You can try one of two things and they both worked for me:
Delay the focus:
setTimeout(function(){
$('.search').focus();
}, 1000);
Or remove the visibility: hidden; css rule from .searchbox input {}.
.searchbox {
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
/* visibility: hidden; */
transition: .6s;
}
.searchbox.active {
opacity: 1;
/* visibility: visible; */
transition-delay: .6s;
transform: translate(-50%, -45%);
}

How can I make my navbar completely responsive?

I recently made an Apple navbar, but I have some trouble with getting it to be responsive. https://codepen.io/51LV3R/pen/OJRxNdj is link for the navbar. The searchbar which is supposed to be in the center transforms after I close it on a mobile device. Does anyone know how can I fix that? As you can see at the bottom of the HTML code, I tried using jQuery. Also, can I add HTML elements through DOM wherever I want? Because I want on click to searchbar to show the button 'cancel' much like the Apple one does. Thanks for help. https://www.apple.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('html').width() <= 767) {
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('activev2')
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('activev2')
})
}else{
}
})
</script>
</body>
</html>
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
transition: .3s!important;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.activev2{
transition: .5s;
transform: scale(1);
}
.nav-link.activev2:hover{
transition: .3s!important;
}
.n1.activev2{
transition-delay: 0.0005s!important;
}
.n2.activev2{
transition-delay: 0.0025s!important;
}
.n3.activev2{
transition-delay: 0.005s!important;
}
.n4.activev2{
transition-delay: 0.025!important;
}
.n5.activev2{
transition-delay: 0.05s!important;
}
.n6.activev2{
transition-delay: 0.1s!important;
}
.n7.activev2{
transition-delay: 0.15s!important;
}
.n8.activev2{
transition-delay: 0.2s!important;
}
.n9.activev2{
transition-delay: 0.25s!important;
}
.n10.activev2{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
.close-btn{
display: none;
}
.n9{
display: none;
}
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: none;
}
.searchbox-active{
display: none;
opacity: 0;
visibility: none;
transform: translate(0)!important;
transition: none;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
setTimeout(()=> {
document.querySelector('#box').focus()
}, 1000)
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}

Like I said the problem was in transitions.
Remove the transition option of .6s from .searchbox in general css and add 1s transition in media queries where max-width: 767px. See the codepen: https://codepen.io/codeweapon/pen/oNzGLZB
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
/* transition: .6s; */
}
#media screen and (max-width: 767px){
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: 1s; /*add transition of 1s */
}
}

I wonder why i can't add picture to the .img class (through the css) and why the sign up button wont change to sign in when i click it [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I follow this youtube tutorial (https://www.youtube.com/watch?v=sy9OI-ndKnc). I don't understand HTML, CSS, and JS that much (to be honest i had no experience in it), but I really need this page to work. I think the .img-btn span.m-in should be the one responsible to translate the button when it get clicked(?).
document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700;800&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*, *:before, *:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading li,a,button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10%;
background-color: #000000;
}
.heading .logo{
cursor: pointer;
height: 80px;
width: 80px;
transition: all 0.3s ease 0s;
-webkit-transition: image 0.2s ease-in-out;
transition: image 0.2s ease-in-out;
}
.navigation{
list-style: none;
}
.navigation li{
display: inline-block;
padding: 0px 20px;
}
.navigation li a{
transition: all 0.3s ease 0s;
}
.navigation li a:hover{
color: #0088a9;
}
.heading button{
padding: 9px 25px;
background-color: rgb(224, 173, 19);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.heading button:hover{
background-color: rgba(0,136,168,0.8);
}
.joinus{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-linear-gradient(left, #000000, #FF0000);
font-family: 'Nunito', sans-serif;
}
.joinus input, button{
border: none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.joinus h2{
width: 100%;
font-size: 30px;
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus label{
display: block;
width: 260px;
margin: 25px auto;
text-align: center;
}
.joinus label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
}
.joinus input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
border-radius: 50px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Nunito', sans-serif;
background-color: rgb(224, 173, 19);
}
.submit:hover{
background-color: rgba(0,136,168,0.8);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600px;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: rgba(0,136,168,0.8);
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
display: inline-block;
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform: translate3d(-640px, 0, 0);
transform: translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(img/alex.jpg);
background-size: cover;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
}
.cont .s-signup .img:before{
-webkit-transform: translate3d(640px, 0, 0);
transform: translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img-text h2{
margin-bottom: 10px;
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform: translateX(520px);
transform: translateX(520px);
}
.img-text.m-in{
-webkit-transform: translateX(-520px);
transform: translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transform: translate3d(640px, 0 , 0);
transform: translate3d(640px, 0 , 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50px;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;
}
.img-btn span.m-in{
-webkit-transform: translateY(-72px);
transform: translateY(-72px);
}
.sign-up{
-webkit-transform: translate3d(-900px, 0 ,0);
transform: translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform: translate3d(0, 0 ,0);
transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join us</title>
<link rel="stylesheet" type="text/css" href="style/joinus.css">
</head>
<body>
<section class="heading">
<header>
<img class="logo" src="img/logo_csc.png" alt="logo">
<nav>
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Research</li>
<li>Our Achievement</li>
</ul>
</nav>
<div>
<button>Join us</button>
</div>
</header>
</section>
<section class="joinus">
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password?</p>
<div class="social-media">
<ul>
<li><img src="img/instagram.png"></li>
<li><img src="img/youtube.png"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">
<h2>New activist?</h2>
<p>Sign up here!</p>
</div>
<div class="img-text m-in">
<h2>Already an activist?</h2>
<p>If you already has an account, sign in here!.</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<input type="text" placeholder="Full Name...">
</label>
<label>
<input type="email" placeholder="Email...">
</label>
<label>
<input type="text" placeholder="Majors...">
</label>
<label>
<input type="password" placeholder="Password...">
</label>
<label>
<input type="password" placeholder="Confirm Password...">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script/register.js"></script>
</body>
</html>

Working Codepen https://codepen.io/thisisloop/pen/xxwadPp
I had to add these two codes to the CSS File:
.cont.s-signup .img-btn span.m-in{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.cont.s-signup .img-btn span.m-up{
-webkit-transform: translateY(72px);
transform: translateY(72px);
}
For the image, you need to add quotation marks
instead of:
background-image: url(img/alex.jpg);
do
background-image: url('img/alex.jpg');
I couldnt add it to the codepen, because codepen doesnt allow file upload for free users.

How to add the full page parallax scroll on a one-page website

I would like to add the full page parallax scroll effect on a one-page website, but I have no idea how to add this effect.
I have tried to set up the section height: 100vh, but the result goes out that the last section covers the above sections.
Do you have any suggestions? Any help is appreciated. Thank you so much.
HTML:
<html lang="en">
<body>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times. </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<section id="section3" class="background">
<h2 >12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li><img src="img/12-constellation-cards/1.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/4.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/7.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/10.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/2.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/5.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/8.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/11.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/3.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/6.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/9.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/12.svg" alt="" class="svg"></li>
</ul>
</div>
</section>
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>
</body>
</html>
JavaScript:
$(document).ready(function () {
let hamburgerClicked = false;
$("#toggle").on("click", function () {
if (hamburgerClicked == false) {
$(".top").css(
"transform",
"translateY(11px) translateX(0) rotate(45deg)"
);
$(".middle").css("display", "none");
$(".bottom").css(
"transform",
"translateY(-11px) translateX(0) rotate(-45deg)"
);
hamburgerClicked = true;
} else {
$(".top").css("transform", "translateY(0px) translateX(0) rotate(0deg)");
$(".middle").css("display", "");
$(".bottom").css(
"transform",
"translateY(0px) translateX(0) rotate(0deg)"
);
hamburgerClicked = false;
}
$("#overlay").toggleClass("active");
$("#overlay").toggleClass("open");
});
});
CSS:
* {
box-sizing: border-box;
list-style: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
section {
height: 100vh;
transform: translateY(40vh);
will-change: transform;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
text-decoration: none;
scroll-behavior: smooth;
}
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
-moz-animation: move-twink-back 16s infinite;
-o-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: 0.7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: 0.6;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}
li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
animation-delay: 0.4s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.5s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: 0.35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 25%;
position: absolute;
top: -46px;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
-moz-animation: rotation 8s infinite linear;
-o-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
-moz-filter: drop-shadow(5px 5px 5px #222);
-o-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
#section3-content {
padding-right: 100px;
padding-left: 100px;
margin-top: -90px;
overflow: hidden;
transition-timing-function: ease;
transition: .3s;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.8);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: -80px;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: -80px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 30px;
padding-bottom: 10px;
padding-right: 100px;
color: floralwhite;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: .9em;
margin-bottom: 15px;
font-weight: 200;
}
.constellation-icon {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.constellation-icon li {
display: table-cell;
vertical-align: middle;
padding: 1px;
padding-top: 15px;
}
.constellation-button {
width: 50%;
}
.constellation-button:hover {
background: rgb(0, 0, 205, 0.7);
filter: brightness(3);
border-radius: 80px;
border: 2px solid rgb(0, 0, 205, 0.7);
}
.constellation-button:active {
background: rgb(0, 0, 205);
filter: grayscale(.2);
transition-timing-function: linear;
}
.constellation-star-aq {
width: 46%;
opacity: 1;
float: left;
left: 1%;
margin-top: -10px;
position: absolute;
}
.constellation-star-ca {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 30px;
margin-left: 40px;
position: absolute;
transform: rotate(16deg);
}
.constellation-img-ca {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-ge {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 90px;
margin-left: 60px;
position: absolute;
transform: rotate(-3deg);
}
.constellation-img-leo {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-leo {
width: 40%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
margin-left: 70px;
position: absolute;
transform: rotate(5deg);
}
.constellation-img-sc {
opacity: .35;
width: 50%;
float: left;
top: -20px;
position: relative;
}
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
Here is a rough working demo on JSFiddle: https://jsfiddle.net/ha3c04yL/4/

Text appearing under meniu page CSS HTML

I created a HTML Website and I have a problem with it, i got a menu from the Internet and edited the website and now I realized that the menu items appear under the menu background.
I got the website online on andrei-marin.com you can check it out.
One thing i discovered is that if you put 'display: flex' in the header, the meniu works perfect but everything is out of the place..
I will add the code below.
// function to open/close nav
function toggleNav(){
// if nav is open, close it
if($("nav").is(":visible")){
$("nav").fadeOut();
$("button").removeClass("menu");
}
// if nav is closed, open it
else{
$("button").addClass("menu");
$("nav").fadeIn().css('display', 'flex');
}
}
// when clicking + or ☰ button
$("button").click(function(){
// when clicking ☰ button, open nav
if($("header").hasClass("open")){
toggleNav();
}
// when clicking + button, open header
else{
$("header").addClass("open");
}
});
// close nav
$("#nav-close").click(function(){
toggleNav();
});
// scroll to sections
$("nav li").click(function(){
// get index of clicked li and select according section
var index = $(this).index();
var target = $("content section").eq(index);
toggleNav();
$('html,body').delay(300).animate({
scrollTop: target.offset().top
}, 500);
});
/* GLOBAL STYLES */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: lightgray;
}
.main_image{
padding-top:50%;
background-image: url('bg.jpg');
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter{
margin-top:25%;
font-size: 20px;
}
.typewriter h1 {
color: #fff;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
header {
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
header button {
position: relative;
z-index: 10;
}
header button {
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
bottom: 100px;
left: calc(50% - 60px);
width: 120px;
height: 50px;
border: 0;
box-shadow: 2px 1px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
cursor: pointer;
background: #fff;
font-size: 1em;
color: #09203f;
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
overflow: hidden;
}
header button:hover {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
header button:focus {
outline: 0;
}
header button:before, header button:after {
font-family: "Font Awesome 5 Free";
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
top: 17px;
position: absolute;
}
header button:before {
content: "\f067";
opacity: 1;
left: 53px;
}
header button:after {
content: "\f0c9";
opacity: 0;
left: 0;
}
header.open button {
position: fixed;
left: 40px;
bottom: 40px;
width: 50px;
border-radius: 50%;
}
header.open button:before {
opacity: 0;
left: 100%;
}
header.open button:after {
opacity: 1;
left: 18px;
}
header.open button.menu {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 0;
}
header.open button.menu:after {
left: -100%;
}
content section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 2pt;
color: #fff;
}
nav {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
nav ul {
list-style: none;
}
nav ul li {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 2;
letter-spacing: 1pt;
font-size: 2em;
color: #09203f;
animation: fadeDown .5s forwards;
opacity: 0;
cursor: pointer;
transform: translateY(-20px);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
nav ul li:hover {
text-shadow: 2px 1px 40px rgba(0, 0, 0, 0.5);
opacity: .8;
}
nav ul li:nth-child(1) {
animation-delay: 0.8s;
}
nav ul li:nth-child(2) {
animation-delay: 0.9s;
}
nav ul li:nth-child(3) {
animation-delay: 1s;
}
nav #nav-close {
position: fixed;
top: 40px;
right: 40px;
font-size: 1.5em;
cursor: pointer;
animation: fadeDown .5s forwards;
animation-delay: 1.1s;
opacity: 0;
color: #09203f;
transform: translateY(-20px);
}
#keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Andrei Marin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel="stylesheet" href="master.css">
</head>
<body>
<header>
<div class="main_image">
<div class="typewriter">
<h1>Andrei Marin</h1>
</div>
<button></button>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="nav-close"><i class="fas fa-times"></i></div>
</nav>
<content>
<section>Home</section>
<section>About</section>
<section>Projects</section>
<section>Contact</section>
</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="master.js"></script>
</body>
</html>

Try removing your z-index: 10; in header button{ (line 59) ?