function generateHeaderAndFooter() { // Add the header and footer HTML as you've done in your dynamic script const header = document.getElementById('header-placeholder'); const footer = document.getElementById('footer-placeholder'); header.innerHTML = `
`; // Add the footer HTML footer.innerHTML = ` `; const hamburgerBtn = document.getElementById('hamburger-btn'); const mobileMenu = document.getElementById('mobile-menu'); // Toggle the mobile menu visibility on hamburger button click hamburgerBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Ensure the mobile menu hides when resizing to desktop window.addEventListener('resize', () => { if (window.innerWidth >= 768) { mobileMenu.classList.add('hidden'); } }); document.querySelectorAll('nav a').forEach(link => { if (link.href === window.location.href) { link.classList.add('text-black'); link.querySelector('i').classList.add('text-black'); } }); };