Transform transition not working on responsive nav menu - html

Question

I have a nav menu I made and I can't get the transform transition to work when I close the menu it only works when I open it. Here is my html
header#main {
position: fixed;
width: 100%;
z-index: 10;
box-shadow: 4px 1px 5px 1px rgba(0,0,0,0.75);
}
.container {
width: 95%;
margin: 0 auto;
}
header {
background: #FFFFFF;
padding: 1em 0 !important;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo-container {
float: left;
margin-left:1em;
}
.site-nav {
position: absolute;
top: 2.3em;
right: 0;
}
.site-nav--open {
}
.site-nav ul {
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: none;
display:inline-block;
margin-left:3em;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
font-family:abel;
color: #333;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
a.login-nav {
color: white;
background: #ef7899;
padding-top: 2.4em !important;
padding-bottom: 2.25em !important;
padding-left: 2em !important;
padding-right: 2em!important ;
transition:background 0.5s ease-in-out;
}
a.login-nav:hover {
background:#000 !important;
color:white !important;
}
.site-nav a:hover,
.site-nav a:focus {
color: #333;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.8em;
right: .7em;
cursor: pointer;
z-index:101;
display:none;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #555;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
background:black;
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
background:black;
}
#media screen and (max-width: 1000px) {
.logo-container img {
width: 200px;
}
.menu-toggle {
display:block;
}
.site-nav {
position: absolute;
top: 100%;
right: 0%;
transform: translateX(100%);
transition:transform 0.8s ease;
}
.site-nav a{
display:none;
}
.site-nav li{
display:block;
}
.site-nav--open {
display: flex;
position: fixed;
top: 0;
right: 0;
z-index: 100;
transform: translateX(70%);
background: white;
height: 100%;
width: 100%;
transition:transform 0.8s ease;
}
.site-nav--open ul{
align-self:center;
}
.site-nav--open a {
font-family:abel;
color: #000;
display: inline-block;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
}
<header id="main">
<div class="container">
<div class="logo-container">
<h1>test</h1>
</div>
<nav class="site-nav">
<ul class="navi">
<li><span class="liner"><a class="vert" href="#one">Invest</a></span></li>
<li><span class="liner"><a class="vert" href="#two">Subscribe</a></span></li>
<li><span class="liner"><a class="vert" href="#why">Why Us</a></span></li>
<li><span class="liner"><a class="vert" href="#three">Faq</a></span></li>
<li class="log"><a class="login-nav" href="http://www.google.com"><i class="fa fa-sign-in" aria-hidden="true"></i>Login</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
I also have some jquery code, but all that does is toggle the menu and add a class when it's open so not sure if it's important to post it or not but here it is.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open');
$(this).toggleClass('open');
$('.landing').toggleClass('landing-open');
})

Answer 1

Just replace css in .site-nav--open to .site-nav
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open');
$(this).toggleClass('open');
$('.landing').toggleClass('landing-open');
})
header#main {
position: fixed;
width: 100%;
z-index: 10;
box-shadow: 4px 1px 5px 1px rgba(0,0,0,0.75);
}
.container {
width: 95%;
margin: 0 auto;
}
header {
background: #FFFFFF;
padding: 1em 0 !important;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo-container {
float: left;
margin-left:1em;
}
.site-nav {
position: absolute;
top: 2.3em;
right: 0;
}
.site-nav ul {
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: none;
display:inline-block;
margin-left:3em;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
font-family:abel;
color: #333;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
a.login-nav {
color: white;
background: #ef7899;
padding-top: 2.4em !important;
padding-bottom: 2.25em !important;
padding-left: 2em !important;
padding-right: 2em!important ;
transition:background 0.5s ease-in-out;
}
a.login-nav:hover {
background:#000 !important;
color:white !important;
}
.site-nav a:hover,
.site-nav a:focus {
color: #333;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.8em;
right: .7em;
cursor: pointer;
z-index:101;
display:none;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #555;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
background:black;
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
background:black;
}
#media screen and (max-width: 1000px) {
.logo-container img {
width: 200px;
}
.menu-toggle {
display:block;
}
.site-nav {
position: fixed;
top: 0%;
right: 0%;
transform: translateX(100%);
transition:transform 0.8s ease;
background: white;
height: 100%;
width: 310px;
z-index: 100;
}
.site-nav a{
display:none;
}
.site-nav li{
display:block;
}
.site-nav--open {
transform: translateX(0%);
}
.site-nav--open ul{
align-self:center;
}
.site-nav--open a {
font-family:abel;
color: #000;
display: inline-block;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="main">
<div class="container">
<div class="logo-container">
<h1>test</h1>
</div>
<nav class="site-nav">
<ul class="navi">
<li><span class="liner"><a class="vert" href="#one">Invest</a></span></li>
<li><span class="liner"><a class="vert" href="#two">Subscribe</a></span></li>
<li><span class="liner"><a class="vert" href="#why">Why Us</a></span></li>
<li><span class="liner"><a class="vert" href="#three">Faq</a></span></li>
<li class="log"><a class="login-nav" href="http://www.google.com"><i class="fa fa-sign-in" aria-hidden="true"></i>Login</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
Working Demo