Currently in the process of creating my portfolio website, but I've hit a roadblock with the icon menu - nothing happens when I click on it.
I attempted different solutions such as replacing the fontawesome icon with an image, seeking help from chatgpt (yeah, I know), and toggling between id and class attributes, but I'm feeling a bit confused at this point.
Here's the code snippet:
HTML
<header>
<img src="assets/img/blanclogo.png" class="logo" alt="logo-blanc">
<nav>
<ul class="navlist" id="navlist">
<li><a href="#home" title="Accueil" class="active">Accueil</a></li>
<li><a href="#logiciel" title="Mes logiciels">Mes compétences</a></li>
<li><a href="#portfolio" title="Page liste portfolio">Portfolio</a></li>
<li><a href="assets/pdf/CV.pdf" title="CV">CV</a> </li>
<li><a href="#contact" title="formulaire">Me contacter</a></li>
</ul>
</nav>
<i class="fa-solid fa-bars" id="menu-burger"></i>
</header>
Javascript
const header = document.querySelector('header');
const menuBurger = header.querySelector('#menu-burger');
const navList = header.querySelector('#navlist');
menuBurger.addEventListener('click', () => {
menuBurger.classList.toggle('active');
navList.classList.toggle('active');
});
navList.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
menuBurger.classList.remove('active');
navList.classList.remove('active');
});
});