The burger menu was causing issues initially due to a simple spelling mistake, which I only noticed later. However, the current issue seems more complex. I am now creating separate pages for different sections of my website, such as About Me, Education, etc. The About Me page is the only one I have started working on so far. While the burger menu functions correctly on the Home page, it does not work on the About page. I have organized each file within its own folder to maintain a tidy structure.
/* ----SCROLL SECTION ACTIVE LINK---- */
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');
window.onscroll = () => {
sections.forEach(sec => {
let top = window.scrollY;
let offset = sec.offsetTop - 150;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');
if (top >= offset && top < offset + height) {
navLinks.forEach(links => {
links.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
});
};
});
/* ----STICKY NAVBAR---- */
let header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 100);
/* ----REMOVE TOGGLE ICON AND NAVBAR WHEN CLICK NAVBAR LINK (SCROLL)---- */
menuIcon.classList.remove('bx-x');
navbar.classList.remove('active');
};
// Rest of the JavaScript code goes here...
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
// Rest of the CSS code goes here...
About Me Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<!-- ----BOX ICONS---- -->
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8295848e82839eaddfc3dcc3d9">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<!-- ----CUSTOM CSS---- -->
<link rel="stylesheet" href="../css/style.css">
// Rest of the HTML markup and CSS code specific to the About Me page goes here...