Why does my Hamburger menu didn't work on other page

Question

currently i'm working on my portfolio website, i've created hamburger menu using Javascript and it works on my homepage, but when i created another page, i copied everything from <header>, but the humburger menu didn't work. I am sure that i already change the path of the file. Also i'm using sass. Is there anything i missed?

HomePage Header HTML

<!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">
    <link rel="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
    <link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style.css">
    <title>igeegi</title>
</head>
<body>
<header>
           <nav>
                <a href="index.html" class="logo"><img src="./images/main-logo.png" alt="igeegi"></a>
               <div class="openMenu">
                   <i class="fa fa-bars"></i>
                </div>
               <ul class="mainMenu">
                    <li><a href="#works">Work</a></li>
                    <li><a href="#resume">Résumé</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <div class="closeMenu">
                        <i class="fa fa-times"></i>
                    </div>
               </ul> 
           </nav>
       </header>
 <script src="./app/app.js"></script>
</body>
</html>

Header style

header {
    width: 100vw;
    height: 80px;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(51, 51, 51, 0.15);
    position: fixed;
    z-index:10000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;

    .mainMenu {
        display:flex;
    }
}

nav .mainMenu li a {
    display: inline-block;
    color: $color-Dark;
    padding: 30px;

    font-size: 1.25rem;
    font-weight: 400;

}

nav .mainMenu li a:hover {
    color: #616161
}

nav .openMenu {
    font-size: 30px;
    color: $color-Dark;
    margin: 10px;
    display: none;
    cursor: pointer;
}

nav .mainMenu .closeMenu, i {
    font-size: 30px;
    display: none;
    cursor: pointer;
}

@media(max-width: 768px){
    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: $color-Yellow;
        transition: top 1s ease;
        display: none;
    }
    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;

    }
    nav .openMenu {
        display: block;
    }
}

Hamburger menu Javascirpt

const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');

openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);

function show(){
    mainMenu.style.display = 'flex';
    mainMenu.style.top = '0';
}
function close(){
    mainMenu.style.top = '-120%';
}

Sub Page Header HTML

<!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">
    <link rel="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
    <link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/style.css">
    <title>works</title>
</head>
<body>
<header>
           <nav>
                <a href="../index.html" class="logo"><img src="../images/main-logo.png" alt="igeegi"></a>
               <div class="openMenu">
                   <i class="fa fa-bars"></i>
                </div>
               <ul class="mainMenu">
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Résumé</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <div class="closeMenu">
                        <i class="fa fa-times"></i>
                    </div>
               </ul> 
           </nav>
       </header>
 <script src="../app/app.js"></script>
</body>
</html>

Try and look at your console, it will most likely tell you why it's not working — Carsten Løvbo Andersen, Nov 01 '21 at 08:53
it says nothing about related to the hamburger menu @CarstenLøvboAndersen — igeegi, Nov 04 '21 at 07:22
Have you tried to add something like `console.log("test")` in your js file and see if it fires from both sites? — Carsten Løvbo Andersen, Nov 04 '21 at 07:30
I am also stuck with the same issue. Can you share what was the solution? — Manthan Koolwal, Sep 30 '22 at 07:42

Why does my Hamburger menu didn't work on other page

0 Answers0