We Keep Coding

CSS and JS issue

Hello I have problem with that code, I want to make sidebar when she going in everything is ok but when I press burger button again
the block does not animate.
Code here:
https://pastebin.pl/view/74464f3c

You left out your animation keyframes in css, and also a few things in your .hide class, take a look ;) :
const burger = document.querySelector(".burger");
let a = document.querySelector(".nav");
let b = 0;
burger.addEventListener("click", function() {
burger.classList.toggle("active");
if (burger.classList.contains("active") == true) {
document.querySelector(".nav").classList.add("show");
document.querySelector(".nav").classList.remove("hide");
b++;
} else if (b == 1) {
document.querySelector(".nav").classList.toggle("show");
document.querySelector(".nav").classList.add("hide");
b--;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condensed', sans-serif;
}
body {
display: flex;
flex-direction: row;
}
.burger {
position: fixed;
top: 30px;
right: 30px;
width: 60px;
height: 45px;
transition: .2s;
cursor: pointer;
}
.burger.active {
transform: rotate(-90deg);
}
.burger span {
position: absolute;
width: 100%;
height: 10px;
background-color: black;
left: 0;
transition: top .2s .2s, bottom .2s .2s, opacity .2s .2s, transform .2s .4s;
}
.burger span:nth-child(1) {
top: 0
}
.burger.active span:nth-child(1) {
top: calc(50% - 5px);
transform: rotate(45deg);
}
.burger span:nth-child(2) {
top: calc(50% - 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger span:nth-child(3) {
bottom: 0;
}
.burger.active span:nth-child(3) {
bottom: calc(50% - 5px);
transform: rotate(-45deg);
}
.nav {
display: none;
height: 100vh;
width: 15vw;
background-color: #3652f5;
text-align: center;
font-size: 100%;
}
ul,
ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
font-size: 2em;
margin-bottom: 30px;
}
i {
margin-bottom: 30px;
color: white;
}
.icon-home {
margin-top: 30px;
}
.nav.show {
display: block;
animation: fadeInLeft .5s linear;
width: 15vw;
}
.nav.hide {
display: block;
opacity: 0;
animation: fadeOutLeft .5s linear;
width: 15vw;
}
#keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-15vw);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav">
<ul>
<li><i class='icon-home'></i></li>
<li><i class='icon-user'></i></li>
<li><i class='icon-facebook'></i></li>
<li><i class='icon-twitter'></i></li>
<li><i class='icon-linkedin'></i></li>
</ul>
</nav>

Cannot display source code from JSFiddle to blogger

I have a problem with my source code. I hope you read well and understand and do not immediately act ignorant of my question.
I very often come across people who are smart but don't like to understand other people's questions.
I've edited a quiz via JSFiddle. With the help of this forum, It works fine on JSFiddle.
But when I tried this source code on blogger, it didn't work very well. The question doesn't arise. Someone said that something was wrong with the CSS. I edited the CSS, but it didn't work. Even when I delete the entire CSS, the questions still don't appear while the rest of the section appears.
I will show the difference with the following image.
The first image is an image that works well in JSField. The second image is the appearance of blogger with full CSS. The third image is the appearance of blogger without CSS. The CSS I mean is the CSS I use on JSField.
I have changed the contents several times, even deleted some parts. But in the end it didn't work and I returned the CSS.
One thing is for sure, even though I tried the question and answer choices from the quizzes it didn't appear on blogger.
I have asked this many times, I hope to find answers to my questions in this forum.
here I give my file link in JSFiddle
and here's the CSS for my problem. I apologize for showing all the CSS because I don't know which part is the problem in blogger
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea{
width: 95%;
margin: auto;
padding:10px;
position: relative;
text-align: center;
}
.mc_quiz{
color: #3a5336;
margin-bottom: 0px;
}
.multipleChoiceQues{
width:90%;
margin: auto;
padding: 10px;
}
.quizBox
{
width:90%;
margin: auto;
}
.question{
text-align: center;
font-size: 0.8em;
}
.buttonArea
{
text-align: right;
height: 4.5em;
}
button {
height: 4em;
width:130px;
padding: 1.5em auto;
margin: 1em auto;
background-color:#f1f2ec;
border: none;
border-radius: 3px;
color: #7aa4a9;
text-transform: uppercase;
letter-spacing: 0.5em;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
width: 30%;
}
.backBtn{
width:100px;
height: 2em;
font-size: 0.8em;
margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active {
letter-spacing: 0.3em;
}
.resultArea{
display: none;
width:70%;
margin: auto;
padding: 10px;
}
.chartBox{
width: 60%;
margin:auto;
}
.resultPage1{
text-align: center;
}
.resultBox h1{
}
.briefchart
{
text-align:center;
}
.resultBtns{
width: 60%;
margin: auto;
text-align:center;
}
.resultPage2,
.resultPage3
{
display: none;
text-align: center;
}
.allAnswerBox{
width: 100%;
margin: 0;
position: relative;
}
._resultboard{
position: relative;
display:inline-block;
width: 40%;
padding: 2%;
height: 190px;
vertical-align: top;
border-bottom: 0.6px solid rgba(255,255,255,0.2);
text-align: left;
margin-bottom: 4px;
}
._resultboard:nth-child(even){
margin-left: 5px;
border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
border-bottom: 0px;
}
._header{
font-weight: bold;
margin-bottom: 8px;
height: 90px;
}
._yourans,
._correct{
margin-bottom: 8px;
position: relative;
line-height: 2;
padding: 5px;
}
._correct{
background: #968089 ;
}
.h-correct{
background: #968089;
}
.h-correct:after,
._correct:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00c";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #2dceb1;
}
.h-incorrect{
background: #ab4e6b ;
}
.h-incorrect:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00d";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #ff383e;
}
.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 1.3px solid rgba(21, 63, 101,0.9);
color: #3a5336;
}
.my-progress {
position: relative;
display: block;
margin: 3rem auto 0rem;
width: 100%;
max-width: 950px;
}
progress {
display: block;
position: relative;
top: -0.5px;
left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f1f2ec ;
width: 100%;
height: 2.5px;
background: none;
-webkit-transition: 1s;
transition: 1s;
will-change: contents;
}
progress::-webkit-progress-bar {
background-color: #c72828;
}
progress::-webkit-progress-value {
background-color:#153f65;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 5px;
height: 5px;
background: #7aa4a9;
border: 3px solid #f1f2ec;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transition-delay: .3s;
transition-delay: .3s;
will-change: transform;
}
.my-progress-indicator.progress_1 {
left: 0;
}
.my-progress-indicator.progress_2 {
left: 9%;
}
.my-progress-indicator.progress_3 {
left: 18%;
}
.my-progress-indicator.progress_4{
left: 27%;
}
.my-progress-indicator.progress_5 {
left: 36%;
}
.my-progress-indicator.progress_6 {
left: 45%;
}
.my-progress-indicator.progress_7 {
left: 54%;
}
.my-progress-indicator.progress_8 {
left: 63%;
}
.my-progress-indicator.progress_9 {
left: 72%;
}
.my-progress-indicator.progress_10 {
left: 81%;
}
.my-progress-indicator.progress_11 {
left: 90%;
}
.my-progress-indicator.progress_12 {
left: 100%;
}
.my-progress-indicator.active {
-webkit-animation: bounce .5s forwards;
animation: bounce .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
border-color: #153f65 ;
}
.animation-container {
position: relative;
width: 100%;
-webkit-transition: .3s;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
-webkit-animation: left-and-out .5s forwards;
animation: left-and-out .5s forwards;
}
.form-step.waiting {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.form-step.coming {
-webkit-animation: right-and-in .5s forwards;
animation: right-and-in .5s forwards;
}
#-webkit-keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#-webkit-keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
ul{
list-style-type: none;
width: 220px;
margin: auto;
text-align: left;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height:30px;
}
label{
color: #c72828;
}
label:before {
content: "";
width: 15px;
height: 15px;
background : #c72828;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff ;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked ~ .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
background : #fff;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #c72828 ;
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked ~ .bullet .line.zero{
animation-name:drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.one{
animation-name:drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.two{
animation-name:drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.three{
animation-name:drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.four{
animation-name:drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.five{
animation-name:drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.six{
animation-name:drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.seven{
animation-name:drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
and if you want to see it in blogger view, click here

Responsive menu does not show

I have created a responsive menu but it doesn't show. I would like to use a hamburger menu button. When it is active (button transform+transition, the hamburger menu icon -> the close icon), the ul will slide out from the right ( background -> opacity.5).
I am not sure which part is erroneous. Do you have any suggestions?
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .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: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 5%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
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: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

You need to add visibility:visible to .active class. and also some css modification to show menu bars.
.active {
visibility: visible;
}
$(document).ready(function() {
$('#toggle').on("click", function() {
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
}
.button-container:hover {
opacity: .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: rgba(0, 0, 0, 0.6);
border: none;
height: 5px;
width: 30px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.middle{
top:10px;
}
.bottom{
top:20px;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
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: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

I would make a second class for the mobile devices.
<div class="overlay" id="overlay"> // copy //Change Class
<nav class="overlay-menu"> //copy //Change Class
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>

How to change the navigation bar animation in the opposite direction?

So,i'm creating a website design,and i want to change my navigation bar position from right top to left top,and want to change the navigation bar opening animation to the the opposite direction.
I mean the whole navigation bar will be on the top right side.
I don't have too much experience in the CSS and web development, so please help me i need this to my school project.
Thank you everyone!
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
overflow: hidden;
text-transform: uppercase;
font-weight: bold;
}
.menu {
height: 70px;
width: 70px;
right: 70px;
top: 20px;
text-align: center;
position: absolute;
background: #f463c3;
overflow: hidden;
transition: all 0.2s ease;
z-index: 999;
}
.menu.active {
width:85%;
transition:width 0.3s;
-webkit-transition:width .3s;
-moz-transition: width 0.3s;
}
.menu.active .menuContent * {
opacity: 1;
}
.menu.active span i:nth-child(1) {
transform: rotate(-45deg) translate(-50%, -50%);
top: 50%;
}
.menu.active span i:nth-child(2) {
transform: translateX(-100px);
opacity: 0;
}
.menu.active span i:nth-child(3) {
transform: rotate(45deg) translate(-50%, -50%);
top: 50%;
}
.menu span {
width: 70px;
height: 70px;
position: absolute;
right: 0;
cursor: pointer;
background: #f463c3;
z-index: 1;
}
.menu span i {
position: absolute;
transform-origin: 50% 50%;
width: 45%;
height: 2px;
left: 0;
right: 0;
margin: auto;
background-color: #ccc;
transition: transform 0.3s ease, opacity 0.1s ease 0.1s;
}
.menu span i:nth-child(1) {
top: 40%;
}
.menu span i:nth-child(2) {
top: 50%;
}
.menu span i:nth-child(3) {
top: 60%;
}
.menu .menuContent {
position: absolute;
width: 100%;
height: 100%;
line-height: 40px;
right: 0px;
text-align: center;
}
.menu .menuContent * {
opacity: 0;
}
.menu .menuContent ul li {
display: inline-block;
margin-left: 50px;
margin-right: 50px;
color: #2d3235;
transition: opacity 0.3s ease 0.3s;
cursor: pointer;
position: relative;
}
.menu .menuContent ul li:hover:before {
opacity: 0.8;
top: 13px;
left: 20px;
}
.menu .menuContent ul li:hover:after {
opacity: 0.8;
bottom: 13px;
left: -20px;
}
</style>
</head>
<body>
<div class='menu'>
<span class='toggle'>
<i></i>
<i></i>
<i></i>
</span>
<div class='menuContent'>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Testimonial</li>
<li>About us</li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<script>
$('.toggle').on('click', function() {
$('.menu').toggleClass('active');
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
overflow: hidden;
text-transform: uppercase;
font-weight: bold;
}
.menu {
height: 70px;
width: 70px;
left: 70px;
top: 20px;
text-align: center;
position: absolute;
background: #f463c3;
overflow: hidden;
transition: all 0.2s ease;
z-index: 999;
}
.menu.active {
width:85%;
transition:width 0.3s;
-webkit-transition:width .3s;
-moz-transition: width 0.3s;
}
.menu.active .menuContent * {
opacity: 1;
}
.menu.active span i:nth-child(1) {
transform: rotate(-45deg) translate(-50%, -50%);
top: 50%;
}
.menu.active span i:nth-child(2) {
transform: translateX(-100px);
opacity: 0;
}
.menu.active span i:nth-child(3) {
transform: rotate(45deg) translate(-50%, -50%);
top: 50%;
}
.menu span {
width: 70px;
height: 70px;
position: absolute;
left: 10px;
cursor: pointer;
background: #f463c3;
z-index: 1;
}
.menu span i {
position: absolute;
transform-origin: 50% 50%;
width: 45%;
height: 2px;
left: 0;
right: 0;
margin: auto;
background-color: #ccc;
transition: transform 0.3s ease, opacity 0.1s ease 0.1s;
}
.menu span i:nth-child(1) {
top: 40%;
}
.menu span i:nth-child(2) {
top: 50%;
}
.menu span i:nth-child(3) {
top: 60%;
}
.menu .menuContent {
position: absolute;
width: 100%;
height: 100%;
line-height: 40px;
right: 0px;
text-align: center;
}
.menu .menuContent * {
opacity: 0;
}
.menu .menuContent ul li {
display: inline-block;
margin-left: 50px;
margin-right: 50px;
color: #2d3235;
transition: opacity 0.3s ease 0.3s;
cursor: pointer;
position: relative;
}
.menu .menuContent ul li:hover:before {
opacity: 0.8;
top: 13px;
left: 20px;
}
.menu .menuContent ul li:hover:after {
opacity: 0.8;
bottom: 13px;
left: -20px;
}
</style>
</head>
<body>
<div class='menu'>
<span class='toggle'>
<i></i>
<i></i>
<i></i>
</span>
<div class='menuContent'>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Testimonial</li>
<li>About us</li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<script>
$('.toggle').on('click', function() {
$('.menu').toggleClass('active');
});
</script>
</body>
</html>

I think below code will help you. transform: rotate(-145deg) for child 1 and transform: rotate(145deg) translate(-50%, -50%); for child 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
overflow: hidden;
text-transform: uppercase;
font-weight: bold;
}
.menu {
height: 70px;
width: 70px;
left: 70px;
top: 20px;
text-align: center;
position: absolute;
background: #f463c3;
overflow: hidden;
transition: all 0.2s ease;
z-index: 999;
}
.menu.active {
width:85%;
transition:width 0.3s;
-webkit-transition:width .3s;
-moz-transition: width 0.3s;
}
.menu span {
width: 70px;
height: 70px;
position: absolute;
right: 0;
cursor: pointer;
background: #f463c3;
z-index: 1;
left: 0;
}
.menu.active .menuContent * {
opacity: 1;
}
.menu.active span i:nth-child(1) {
transform: rotate(-145deg) translate(-50%, -50%);
top: 50%;
}
.menu.active span i:nth-child(2) {
transform: translateX(-100px);
opacity: 0;
}
.menu.active span i:nth-child(3) {
transform: rotate(145deg) translate(-50%, -50%);
top: 50%;
}
.menu span {
width: 70px;
height: 70px;
position: absolute;
right: 0;
cursor: pointer;
background: #f463c3;
z-index: 1;
}
.menu span i {
position: absolute;
transform-origin: 50% 50%;
width: 45%;
height: 2px;
left: 0;
right: 0;
margin: auto;
background-color: #ccc;
transition: transform 0.3s ease, opacity 0.1s ease 0.1s;
}
.menu span i:nth-child(1) {
top: 40%;
}
.menu span i:nth-child(2) {
top: 50%;
}
.menu span i:nth-child(3) {
top: 60%;
}
.menu .menuContent {
position: absolute;
width: 100%;
height: 100%;
line-height: 40px;
right: 0px;
text-align: center;
}
.menu .menuContent * {
opacity: 0;
}
.menu .menuContent ul li {
display: inline-block;
margin-left: 50px;
margin-right: 50px;
color: #2d3235;
transition: opacity 0.3s ease 0.3s;
cursor: pointer;
position: relative;
}
.menu .menuContent ul li:hover:before {
opacity: 0.8;
top: 13px;
left: 20px;
}
.menu .menuContent ul li:hover:after {
opacity: 0.8;
bottom: 13px;
left: -20px;
}
</style>
</head>
<body>
<div class='menu'>
<span class='toggle'>
<i></i>
<i></i>
<i></i>
</span>
<div class='menuContent'>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Testimonial</li>
<li>About us</li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<script>
$('.toggle').on('click', function() {
$('.menu').toggleClass('active');
});
</script>
</body>
</html>

Overlay nav doesn't cover all elements on the page

I'm having a bit of trouble getting the overlay nav to cover all the elements within the page. When I create a container or row for an individual section within the page the overlay seems to not overlay.
Here's the code and a link to codepen http://codepen.io/anon/pen/aOGYdy
HTML
<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 id="topNav" class="overlay-menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
<div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
</div>
<div ng-app="typeApp">
<section ng-controller="typeController" class="content">
<h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor"> </span></h2>
</section>
</div>
</div>
<div class="col-md-7">
<img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
</div>
</div>
</div>
</section>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<p>Contact</p>
</section>
CSS
html, body {
height: 100%;
margin: 0;
font-size: 21px;
}
/* TYPE */
h1 {
font-size: 2.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -2px;
color: #222;
margin-bottom: .3em;
}
h2 {
font-weight: 200;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
}
h2 span.cursor {
display: inline-block;
background: #333;
margin-left: 1px;
width: .05em;
animation: blink 2s linear 0s infinite;
}
h2.typing span.cursor {
animation: none;
}
#keyframes blink {
0% { background: #FFF }
47% { background: #FFF }
50% { background: #333 }
97% { background: #333 }
100% { background: #FFF }
}
/* SECTIONS */
html, body {
height: 100%;
margin: 0;
padding: 0;
margin:0;
}
section {
height: 100%;
width: 100%;
display: table;
}
#home {
background-color: #ffffff;
}
#portfolio {
background-color: #1abc9c;
}
#about {
background-color: #e67e22;
}
#contact {
background-color: #22a7f0;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
font: 700 3em/1 'Open Sans', sans-serif;
text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
color: #fff;
}
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #35B0FC;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 3%;
right: 3%;
height: 25px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: black;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: relative;
}
*/
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
JavaScript
//nav toggle
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
//pages size
(function () {
var px, sections, speed, wait;
sections = document.getElementsByTagName('section');
px = 100;
speed = 0.5;
wait = 2000;
$(window).on('scroll', function () {
clearTimeout($.data(this, 'timer'));
return $.data(this, 'timer', setTimeout(function () {
var i, results, sectionY, time, windowY;
windowY = $(window).scrollTop();
i = sections.length - 1;
results = [];
while (i >= 0) {
if (sectionY - px < windowY && windowY < sectionY + px) {
time = Math.abs(windowY - sectionY) / speed;
$(document.body).animate({ scrollTop: sectionY }, time, 'swing');
}
results.push(i--);
}
}, wait));
});
}.call(this));
//slide
// Cache selectors
var lastId,
topMenu = $("#topNav"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
$('html, body').stop().animate({
scrollTop: o
}, 800);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});

Just add a z-index to .overlay
http://codepen.io/anon/pen/oXdqYy
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
z-index: 99;
}