Responsive nav toggle not working

Question

I have spent hours and hours trying to figure out why the menu burger icon toggle is not working, literally tearing my hair out. I get the error message:

Cannot read property 'addEventListener' of null

is this suggesting that it cannot find the element

Any help or even a point in the right direction would be marvelous.

HTML :

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive</title>
    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

</head>
<body>
    <!-- LANDING PAGE -->
    <div class="landing">
        <!-- NAVBAR -->
        <div class="nav-container">
            <div class="Navbar__Link-toggle">
                <i class="fas fa-bars fa-lg"></i>
            </div>
            <div class="logo-name blue-text">First</div>
            <div class="logo-name">Second</div>

            <div class="menu-items">Skills</div>
            <div class="menu-items">About</div>
            <div class="menu-items">Portfolio</div>
        </div>
    </div>
<script type="text/javascript" src="navbar.js"></script>
</body>
</html>

CSS :

body{
    font-family: Roboto-Light;
    font-style: normal;
    color: #3E3E3E;
    display: flex;
    justify-content: center;
}
.landing {
    width: 100%;
    height: 1080px;
    display: flex;
    justify-content: center;
    background-image: url(img/landingpage_mac.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* NAVBAR START */
.nav-container {
    width: 80%;
    height: 170px; 
    display: flex;
    /* border: solid red 1px; */
    overflow: hidden;
    padding-top: 40px;
}

.Navbar__Link-toggle {
    display:none;
}
/* NAVBAR END */

/* LOGO START */
.logo-name {
    font-family: Roboto-Thin;
    font-size: 35px;
    color: #3E3E3E;
    display: flex;
    flex-direction: row;
    height:35px;
    /* border: solid red 1px; */
}
.blue-text {
    font-family: Roboto;
    font-style: bold;
    color: #4999BC;
    padding-top:40px;
    /* border: solid red 1px; */
}
/* LOGO end */

/* MEDIA QUERIES */
/*iPhone 6 Portrait*/

@media only screen and (min-width: 360px) and (max-width: 667px) and (orientation : portrait) { 
    .landing {
        background-image: url(img/phone_420x630.jpg);
        height: 750px;

    }
    .nav-container{
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .menu-items{
        display: none;

    }
    .menu-item-toggle-show{
        display: flex;
    }

    .Navbar__Link-toggle {
        align-self: flex-end;
        display: initial;
        position: absolute;
        cursor: pointer;
    }
}

JS :

function classToggle() {
    const navs = document.querySelectorAll('.Navbar__Items')

    navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  }

  document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);

Answer 1

Some class names in your html , css and js files don't match with each other. Otherwise, it's all OK. Change them accordingly:

 function classToggle() { const navs = document.querySelectorAll('.Navbar__Items') navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); } document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);

 body { font-family: Roboto-Light; font-style: normal; color: #3E3E3E; display: flex; justify-content: center; } .landing { width: 100%; height: 1080px; display: flex; justify-content: center; background-image: url(img/landingpage_mac.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .nav-container { width: 80%; height: 170px; display: flex; overflow: hidden; padding-top: 40px; } .Navbar__Link-toggle { display: none; } .logo-name { font-family: Roboto-Thin; font-size: 35px; color: #3E3E3E; display: flex; flex-direction: row; height: 35px; } .blue-text { font-family: Roboto; font-style: bold; color: #4999BC; padding-top: 40px; } @media only screen and (min-width: 360px) and (max-width: 667px) and (orientation: portrait) { .landing { background-image: url(img/phone_420x630.jpg); height: 750px; } .nav-container { align-items: center; flex-wrap: wrap; flex-direction: column; } .Navbar__Items { display: none; } .Navbar__ToggleShow { display: flex; } .Navbar__Link-toggle { align-self: flex-end; display: initial; position: absolute; cursor: pointer; } }

 <div class="landing"> <div class="nav-container"> <div class="Navbar__Link-toggle"> <i class="fas fa-bars fa-lg"></i> </div> <div class="logo-name blue-text">First</div> <div class="logo-name">Second</div> <div class="Navbar__Items">Skills</div> <div class="Navbar__Items">About</div> <div class="Navbar__Items">Portfolio</div> </div> </div>

Here's the jsfiddle: http://jsfiddle.net/gxv47f9j/5/

Responsive nav toggle not working

Question

1 answers

solution1
0 ACCPTED 2018-06-28 05:27:00

Responsive nav toggle not working

Question

1 answers

solution1 0 ACCPTED 2018-06-28 05:27:00

solution1
0 ACCPTED 2018-06-28 05:27:00