@taqh
Posted
Hi chinelo 👋, it seems you need to make a few changes
⚫️ The div wrapping the UL is not necessary you can put the navbar-link class on the UL itself.
⚫️ It seems you’re trying to display the mobile Nav on click of the toggle button by adding the ‘active’ class but you don’t actually have a style to hide it for mobile devices.
You can try this:-
@media (max-width: 400px) {
.navbar-link {
Transform: translateX(100%);
Display: flex;
Flex-direction: column;
Background: white;
}
};
This will slide the navbar links out of view on mobile devices
⚫️. You currently have this
navbar-link.active{
display: flex;
}
You should try this instead :-
navbar-link.active{
Transform: translateX(0)
};
This will slide the mobile nav into view when the button is clicked.
⚫️. Your JavaScript has some issues, you’re adding a class to show the Nav you also need to remove the class when it’s clicked again.
Here’s what you can try instead of what you have written down
- first you should use a queryselector to target your elements:-
const navToggle = document.querySelector(".toggle-button");
const nav = document.querySelector(".navbar-link");
- Then this would be the proper way to add a class to you your UL element/Div
toggleButton.addEventListener('click', () => {
nav.classList.add('active')
});
- Then you can use an if statement to check if it has the active class buy using the
.contains()
method
You can remove a class by using the
.remove()
method
I hope this helps :)
