Transition not working on my toggle bar

[khushi-05]

Hey there , I'm on the middle of the you amazing Tutorial but i got stuck as when i click on the toggle bar it does not work its just blank, its suppose to show the contents atleast if not the transition.......i was wondering if anyone can take a peek and help sort it.....

Here is my HTML file
`

<title>NEXT Website</title>

NEXT

• Home
• Tech
• Products
• Sign Up

<script src="app.js"></script> `

This is my CSS file.....

` *{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}

.navbar {
background: #131313;
height: 80px ;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}

.navbar__container{
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}

#navbar__logo{
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}

.fa-gen{
margin-right: 0.5rem;
}

.navbar__menu{
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item{
height: 80px;
}

.navbar__links{
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}

.navbar__btn{
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}

.button{
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}

.button:hover{
background: #4837ff;
transition: all 0.3s ease;
}

.navbar__links:hover{
color: #f77062;
transition: all 0.3s ease;
}

@media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}

.navbar__menu.active {
background: #131313;
top: 100% ;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}

#navbar__logo{
padding-left: 25px;
}

.navbar__toggle .bar{
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}

.navbar__item {
width: 100%;
}

.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}

#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}

.navbar__btn {
padding-bottom: 2rem;
}

.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}

.navbar__toggle .bar {
display: block;
cursor: pointer;
}

#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

}`

This is my js File......

#`const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');

menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menulinks.classList.toggle('active');
});`

[inge02]

I'm having the same problem.

[Enock4212]

having same problem

[Enock4212]

about the the icon ...can someone help out??