Css transition not working on ul element of navbar - css

Question

I am trying to animate slider up and down on toggle on navbar using javascript but the css transition property is not working on the ul element
Following is my updated codepen https://codepen.io/divya95/pen/vYNdKrz
Code:
<div class="container row">
<nav class="nav">
<a class="logo"><img src="../flexbox/vanderbilt-commodores-1.svg"></a>
<ul class="nav__list nav__list--primary">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Contact Us
</li>
<li class="nav__item">
Sign In
</li>
<li class="nav__item">
Sign Up
</li>
</ul>
<button class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<!-- <ul class="nav__list nav__list--secondary">
</ul> -->
</nav>
</div>
Css:
.nav-visible {
width: 100%;
text-align: center;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
top: 40px;
display: block;
background: #2E323F;
list-style-type: none;
padding: 1em;
/* this is not working */
transition: height 5s ease;
}

Answer 1

Here I used jQuery because it's easier for me but you can make it without it.
notice how i also changed .nav-visible and .nav__list
$(document).ready(function(){
$('.nav-toggle').click(function () {
$(this).toggleClass('is-active');
toggleMenu($(this).hasClass('is-active'));
});
});
function toggleMenu(openMenu) {
let menu = $('.nav__list');
if(openMenu) {
menu.css('height', 'auto');
let nextHeight = menu.height();
menu.css('height', 0);
menu.animate({
'height': nextHeight,
'padding': '1em'
}, 200, function() {
menu.css({
'height': 'auto',
});
});
} else {
menu.css('overflow', 'hidden');
menu.animate({
'height': 0,
'padding': 0
}, 200);
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
color: #222C2A;
}
.container {
max-width: 1200px;
}
.row {
display: flex;
justify-content: space-between;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
background: #2E323F;
}
.nav__list {
height: 0;
overflow: hidden;
}
.nav__link {
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
color: white;
}
.nav__list {
width: 100%;
text-align: center;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
top: 40px;
display: block;
background: #2E323F;
list-style-type: none;
padding: 0em;
}
.nav-visible {
padding: 1em;
}
.nav-visible .nav__item {
padding-bottom: 1em;
}
.nav__link {
padding: 1em;
}
.logo {
margin-left: 2.5em;
}
.logo img {
width: 45px;
height: 45px;
margin-left: 1em;
margin-top: 0.5em;
margin-right: 0.5em;
}
.nav-toggle {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-top: 0.85em;
margin-right: 0.95em;
}
.bar {
cursor: pointer;
display: block;
height: 2px;
background: #222C2A;
transition: all 0.3s ease-in-out;
}
.bar:nth-child(1) {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.bar:nth-child(3) {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
.hamburger-active .bar:nth-child(1) {
-webkit-transform: translateY(2px) rotate(45deg);
transform: translateY(2px) rotate(45deg);
}
.hamburger-active .bar:nth-child(2) {
opacity: 0;
}
.hamburger-active .bar:nth-child(3) {
-webkit-transform: translateY(-2px) rotate(-45deg);
transform: translateY(-2px) rotate(-45deg);
}
#media(min-width: 700px) {
header {
background: #2E323F;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav__list {
list-style-type: none;
display: flex;
/* visibility: visible; */
}
.nav__link {
text-decoration: none;
text-transform: uppercase;
font-size: 0.85rem;
margin-right: 0.8em;
}
.nav-toggle {
display: none;
}
.nav__item {
margin-right: 1.5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container row">
<nav class="nav">
<a class="logo"><img src="../flexbox/vanderbilt-commodores-1.svg"></a>
<ul class="nav__list nav__list--primary">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Contact Us
</li>
<li class="nav__item">
Sign In
</li>
<li class="nav__item">
Sign Up
</li>
</ul>
<button class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</div>
</header>