I’m working on a personal portfolio website and have implemented a hamburger menu for mobile views. The hamburger menu works perfectly on my index.html page, but it doesn’t function on any of the other pages like about.html or research.html.
The hamburger menu in my index.html works as expected, but when I navigate to any other page (e.g., about.html), clicking the menu doesn’t do anything. I use the same HTML structure and link to the same external JavaScript file (scripts.js) for all pages.
Here’s my setup:
index.html (Header part):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio | Home</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to CSS -->
<script defer src="scripts.js"></script> <!-- Link to JavaScript -->
<link rel="icon" href="images/logos/favicon.png" type="image/png">
</head>
<body>
<!-- Navigation Bar -->
<header>
<div class="nav-container">
<div class="logo">
<a href="index.html">
<img src="images/logos/logo.png" alt="Logo">
</a>
</div>
<nav class="nav-menu">
<a href="about.html">About</a>
<a href="research.html">Research</a>
<a href="blog.html">Blog</a>
<a href="publications.html">Publications</a>
</nav>
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</body>
</html>
about.html (Same structure as index.html for the header):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio | About</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to CSS -->
<script defer src="scripts.js"></script> <!-- Link to JavaScript -->
<link rel="icon" href="images/logos/favicon.png" type="image/png">
</head>
<body>
<!-- Navigation Bar -->
<header>
<div class="nav-container">
<div class="logo">
<a href="index.html">
<img src="images/logos/logo.png" alt="Logo">
</a>
</div>
<nav class="nav-menu">
<a href="about.html">About</a>
<a href="research.html">Research</a>
<a href="blog.html">Blog</a>
<a href="publications.html">Publications</a>
</nav>
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</body>
</html>
JavaScript (scripts.js):
document.addEventListener('DOMContentLoaded', () => {
const texts = [
"where we explore the evolution and pharmacology of proteins.",
"where we investigate the expansion of genes.",
"where we conduct studies.",
"where we study structure.",
"where we learn new tools and explore visualization."
];
let index = 0;
const animatedTextElement = document.getElementById('animated-text');
console.log('Animated text element:', animatedTextElement);
function typeWriter(text, callback) {
let i = 0;
const speed = 50;
function typing() {
if (i < text.length) {
animatedTextElement.textContent += text.charAt(i);
i++;
setTimeout(typing, speed);
} else if (callback) {
setTimeout(callback, 1000);
}
}
typing();
}
function deleteText(callback) {
let i = animatedTextElement.textContent.length;
const speed = 30;
function deleting() {
if (i > 0) {
animatedTextElement.textContent = animatedTextElement.textContent.substring(0, i - 1);
i--;
setTimeout(deleting, speed);
} else if (callback) {
setTimeout(callback, 500);
}
}
deleting();
}
function cycleTexts() {
typeWriter(texts[index], () => {
deleteText(() => {
index = (index + 1) % texts.length;
cycleTexts();
});
});
}
cycleTexts();
// Smooth scrolling for a specific section
const videoSection = document.querySelector('.specific-section');
if (videoSection) {
const videoLink = document.querySelector('.scroll-to-section');
if (videoLink) {
videoLink.addEventListener('click', (event) => {
event.preventDefault();
videoSection.scrollIntoView({ behavior: 'smooth' });
});
}
}
// Form validation
function validateForm(event) {
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const message = document.getElementById("message").value.trim();
if (name === "" || email === "" || message === "") {
alert("Please fill in all the required fields.");
event.preventDefault(); // Prevent form submission if validation fails
return false;
}
return true;
}
const form = document.getElementById("formId");
if (form) {
form.addEventListener("submit", validateForm);
}
// Hamburger menu toggle
const hamburgerMenu = document.querySelector('.hamburger-menu');
const navMenu = document.querySelector('.nav-menu');
console.log('Hamburger menu:', hamburgerMenu);
console.log('Nav menu:', navMenu);
if (hamburgerMenu && navMenu) {
hamburgerMenu.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
}
});
What I’ve Tried:
- Verified that the external JavaScript file is linked correctly on all pages (
scripts.jsis loaded). - The HTML structure for the navigation bar is the same on both
index.htmlandabout.html. - Checked for JavaScript errors in the console on
about.html– no errors are shown. - The JavaScript works on
index.htmlbut not on other pages.
My Expected Behavior:
I want the hamburger menu to toggle the .nav-menu on and off when clicked, across all pages, not just on the homepage (index.html).
What Could Be Causing the Issue?
- Could it be related to how I’m referencing the JavaScript or HTML structure across pages?
- Is there an issue with the JavaScript being loaded on other pages?
Any help or insights would be appreciated! Thanks in advance!