We Keep Coding

How Do I Close The Hamburger Menu When Navigating Back And Forth Between Web Pages?

I've got some Javascript running on my website (the works really well) that enables my menu to close the hamburger menu after a link in it has been clicked.
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
I'd like to set up the hamburger menu so that it will also close automatically when navigating back and forth (using the back and forward buttons). Would this involve using this if(performance.getEntriesByType("navigation")[0].type == "back_forward") script? Any knowledge that you could share with me on how to achieve this would be very much appreciated.
The code for my menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
The CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

Close the overlay fullscreen menu when anchor link is clicked

I am not good in Javascript, and I know this is very easy for some of you.
I adopted the overlay fullscreen menu from Codepen. I am trying to figured it out how I can close the overlay fullscreen menu when I clicked the anchor link.
snippet here
#import "http://webfonts.ru/import/notcourier.css";
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
can anyone help me to close the overlay fullscreen menu by adding javascript on the code?

$( ".target" ).click(function() {
$("#op").prop('checked', false);
});
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a class="target" href="#">Home</a></li>
<li><a class="target" href="#">About</a></li>
<li><a class="target" href="#">Work</a></li>
<li><a class="target" href="#">Clients</a></li>
<li><a class="target" href="#">Contact</a></li>
</ul>
</nav>
</div>

css make element slanted and hoverable

I have this product card, which i am using for a model type card:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 200px;
left: 0;
top: 100%;
background-color: #fff;
transform: skewY(0deg);
transform-origin: 0 0;
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>
I need it to be like this:
https://res.cloudinary.com/piersolutions/video/upload/v1626393248/Screen_Recording_2021-07-15_at_7.47.07_PM_nlksby.mov
however, I cannot figure out 1) how to get the item slanted, and 2) to only do it on hover. I have been trying for days and cannot find anything on how to do this!! I tried using the hover css tag, but it didn't work, because i don't know how to mkae it appear and disapear on hover, and slanted is even worse :( Any ideas?

Here is the working example, you just need to move a skewed element on hovering .rooted-increment.
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 100px;
left: 0;
top: 100%;
background-color: #ffffff54;
transform: skewY(25deg);
transform-origin: 0 0;
transition: all 0.3s ease-in;
}
.rooted-increment:hover .cover:after {
transform: skewY(25deg) translateY(-100px);
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>

You can do like this also.
#import 'https://fonts.googleapis.com/css?family=Do+Hyeon';
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear-fix:after {
display: block;
clear: both;
content: "";
}
.img-responsive {
max-width: 100%;
height: auto;
}
.card__collection {
position: relative;
display: block;
background: rgba(10, 10, 10, 0.5);
padding: 10px;
font-family: "Do Hyeon", sans-serif;
overflow: hidden;
}
.card__collection .cards {
width: 300px;
height: 400px;
display: block;
background-size: cover;
float: left;
border-radius: 15px;
position: relative;
overflow: hidden;
background-position: center;
margin: 10px;
}
.card__collection .cards--one {
backface-visiblility: hidden;
}
.card__collection .cards--one:hover:after {
bottom: -20px;
}
.card__collection .cards--one:hover:before {
bottom: -10px;
}
.card__collection .cards--one:hover .cards--one__rect {
left: 45%;
}
.card__collection .cards--one:hover .cards--one__rect--back {
left: 50%;
}
.card__collection .cards--one::after {
content: "";
display: block;
position: absolute;
height: 70px;
transform: rotate(-3deg);
background: #e660e3;
position: absolute;
bottom: -80px;
left: 0;
right: -10px;
z-index: 9;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one:before {
content: "";
display: block;
position: absolute;
height: 80px;
transform: rotate(-3deg);
bottom: -90px;
left: 0;
background: #fff;
right: -10px;
z-index: 5;
transition: all 0.2s ease-in;
transition-delay: 0.1s;
}
.card__collection .cards--one__rect {
color: #fff;
text-transform: uppercase;
font-size: 18px;
background: #0f9bc0;
width: 126px;
height: 55px;
transform: skewY(5deg);
position: absolute;
display: block;
top: 60%;
left: -45%;
z-index: 1;
line-height: 3.3rem;
text-align: center;
transition: all 0.2s ease-in;
}
.card__collection .cards--one__rect--back {
display: block;
background: rgba(34, 65, 154, 0.8);
width: 126px;
height: 55px;
transform: skewY(7deg);
position: absolute;
top: 65%;
left: -50%;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one__rect p {
transform: skewY(-7deg);
position: relative;
}
.card__collection .cards--two {
position: relative;
backface-visibility: hidden;
}
.card__collection .cards--two p {
position: absolute;
top: 83%;
left: -100%;
text-transform: capitalize;
color: #fff;
font-size: 20px;
z-index: 8;
transition: all 0.6s ease;
}
.card__collection .cards--two:hover p {
left: 8%;
}
.card__collection .cards--two:hover img {
transform: translateY(-15px);
}
.card__collection .cards--two:hover .cards--two__rect {
top: 75%;
}
.card__collection .cards--two:hover .cards--two__rect:before {
transform: translateY(15px);
}
.card__collection .cards--two:hover li {
transform: translateY(0);
}
.card__collection .cards--two:hover .cards--two__tri {
right: -40%;
}
.card__collection .cards--two:hover .cards--two__tri:before {
right: -312px;
}
.card__collection .cards--two img {
transition: all 0.2s ease;
}
.card__collection .cards--two__tri {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #fff;
opacity: 0.9;
position: absolute;
display: block;
top: 0;
right: -100%;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__tri:before {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #57ccfd;
position: absolute;
content: "";
display: block;
top: -220px;
right: -612px;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.card__collection .cards--two__rect {
width: 750px;
height: 200px;
background: #fff;
display: block;
position: absolute;
top: 175%;
left: -78%;
transform: rotate(30deg);
z-index: 5;
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__rect:before {
content: "";
display: block;
width: 100%;
position: relative;
height: 100%;
background: #f07306;
transform: translateY(200px);
z-index: 2;
transition: all 0.3s ease-in-out;
transition-delay: 0.1s;
}
.card__collection .cards--two ul {
list-style: none;
position: absolute;
bottom: 0;
left: 10px;
z-index: 9;
}
.card__collection .cards--two ul li {
display: inline-block;
font-size: 16px;
margin: 7px;
color: #fff;
transition: all 0.2s ease-in-out;
transform: translateY(100px);
}
.card__collection .cards--two ul li:nth-child(2) {
transition-delay: 0.2s;
}
.card__collection .cards--two ul li:nth-child(3) {
transition-delay: 0.3s;
}
.card__collection .cards--two ul li:nth-child(4) {
transition-delay: 0.4s;
}
.card__collection .cards--three {
position: relative;
z-index: 10;
}
.card__collection .cards--three:hover .cards--three__rect-1 {
left: 10%;
}
.card__collection .cards--three:hover .cards--three__rect-1 .shadow-1 {
left: -20%;
}
.card__collection .cards--three:hover .cards--three__rect-2 {
left: 60%;
}
.card__collection .cards--three:hover .cards--three__rect-2:before {
left: -100%;
}
.card__collection .cards--three:hover .cards--three__rect-2:after {
left: 80%;
}
.card__collection .cards--three:hover .cards--three__rect-2 .shadow-2 {
left: -10%;
}
.card__collection .cards--three:hover .cards--three__circle {
transform: scale(1);
}
.card__collection .cards--three:hover .cards--three__circle:before {
transform: scale(0.9);
}
.card__collection .cards--three:hover .cards--three__list li {
transform: translateX(0);
}
.card__collection .cards--three__rect-1 {
background: #fff;
width: 200px;
height: 110px;
transform: skewX(-20deg);
display: block;
position: absolute;
top: 73%;
opacity: 0.9;
left: -100%;
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-1 p {
font-size: 20px;
color: #fff;
transform: skewX(20deg);
line-height: 6rem;
}
.card__collection .cards--three__rect-1 .shadow-1 {
background: #9b1308;
width: 230px;
height: 100px;
display: block;
position: absolute;
left: -200%;
z-index: -1;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2 {
width: 100px;
height: 70px;
background: #fff;
position: absolute;
top: 65%;
left: 1000%;
opacity: 0.9;
transform: skewX(-20deg);
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-2::before {
content: "";
display: block;
width: 50px;
height: 40px;
background: #57ccfd;
opacity: 1;
position: absolute;
left: 500%;
top: 10%;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2::after {
content: "";
display: block;
width: 50px;
height: 40px;
background: #9b1308;
opacity: 1;
position: absolute;
left: 500%;
top: 114%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__rect-2 .shadow-2 {
background: #57ccfd;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -10%;
left: 500%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__circle {
width: 220px;
height: 220px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -15%;
left: 50%;
opacity: 0.9;
transform: scale(0);
transition: all 0.3s ease;
}
.card__collection .cards--three__circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #9b1308;
border-radius: 50%;
transform: scale(0);
transition: all 0.3s ease;
transition-delay: 0.2s;
}
.card__collection .cards--three__list {
list-style: none;
position: absolute;
top: -9px;
right: 7px;
padding-top: 60px;
transition: all 0.4s ease;
}
.card__collection .cards--three__list li {
display: inline-block;
margin: 4px;
color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(87, 204, 253, 0.9);
text-align: center;
line-height: 1.7rem;
font-size: 12px;
transition: all 0.3s ease;
transform: translateX(500%);
}
.card__collection .cards--three__list li:nth-child(1) {
transition-delay: 0.2s;
}
.card__collection .cards--three__list li:nth-child(2) {
transition-delay: 0.3s;
}
.card__collection .cards--three__list li:nth-child(3) {
transition-delay: 0.4s;
}
<div class="card__collection clear-fix">
<div class="cards cards--two">
<img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>Lucy Grace</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="cards cards--three">
<img src="https://images.unsplash.com/photo-1480408144303-d874c5e12201?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=575213599ae24b3dbdfd84be79425c50&auto=format&fit=crop&w=634&q=80" class="img-responsive" alt="">
<span class="cards--three__rect-1">
<span class="shadow-1"></span>
<p>Chris Levnon</p>
</span>
<span class="cards--three__rect-2">
<span class="shadow-2"></span>
</span>
<span class="cards--three__circle"></span>
<ul class="cards--three__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>

How can this menu be fixed so it can be responsive?

I have this menu: (the snippet is quite long), please look at the snippet in fullscreen...
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>
It looks nice, but the problem is the smaller screens, it covers the logo and burger, i had an idea for smaller screens to be like this:
but i don't know how to achieve this, maybe i have some mistakes in code, or my concept is wrong.... Please help.

$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu').toggleClass('hidden');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#media (max-width: 700px) {
.hidden {
display: none;
}
.header_menu {
min-height: 200px;
width: 100%;
top: 64px;
}
.burger {
background-color: #000;
}
#menu li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu hidden">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>

You can achieve this, using bootstrap library. Try like this , hope it will help.
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu_sm').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.hidden-lg.open:before {
border-bottom: 5px solid #000;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open:after {
border-bottom: 5px solid #000;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 100%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translate(-90%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
.header_menu_sm {
width: 90%;
position: absolute;
background: #000;
margin-top: 10%;
right: 0;
left: 100%;
height: auto;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu_sm.is_open {
transform: translate(-100%,15%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu_sm {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
top: 50%;
left: 100%;
transform: translateY(0%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu_sm.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu_sm li {
list-style: none;
display: block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#menu_sm li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div class="header_logo ">
JD
</div>
<div class="header_menu hidden-md hidden-xs hidden-sm">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger hidden-md hidden-xs hidden-sm">
</div>
<div class="burger hidden-lg hidden-xl">
</div>
</div>
</div>
<div class="header_menu_sm hidden-lg hidden-xl">
<span>MENU</span>
<ul id="menu_sm">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
</body>
</html>

Text Underline Animation Left to Right

The Navigation Links on hover ease in a underline from left to right and ease out right to left. I would like to make it so that both the ease in & ease out go from left to right. How can I adjust the ease out?
http://jsfiddle.net/2tycjc82/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
#navpromo ul {
margin: 0;
}
.want{
display: inline-block;
text-align: center;
float: left;
padding-right:10px;
margin-bottom: 0;
}
.check{
text-align: center;
display:inline-block;
}
#media only screen and (max-width: 555px) {
.want{
display: block;
text-align: center;
float: none;
padding-right: 0px;
margin-bottom: 0;
}
.check{
text-align: center;
display: block;
}
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});

Make some changes to your css:
.navlist:after {
...
float: right; /* Add this line */
}
.navlist:hover:after {
...
float: left; /* Add this line */
}
Demo: http://jsfiddle.net/2tycjc82/2/
But as I commented. There's a not-so-nice result when user hover in then immediately hover out.