css javascript active function not working

Question

Trying to create a basic drop down menu that appears once size of screen reaches certain pixels.

HTML code is as follows:

<div class="navigation">

                <a href="#" class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                  </a>

                <div class="nav-link-wrapper">
                    <a href="index.html">Home</a>
                </div>


                <div class="nav-link-wrapper">
                    <a href="contact.html">Contact</a>
                </div>

            </div>

Have a Javascript code that goes like this:

const toggleButton = document.getElementsByClassName('hamburger')[0]
const navbarLinks = document.getElementsByClassName('nav-link-wrapper')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

And my CSS code goes like:

@media only screen and (max-width: 650px) {
    .hamburger{
        display: block;
    }

    .navigation{
        /* display: none; */
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-bottom: 2px solid rgb(185, 22, 22);
        border-top: 2px solid rgb(185, 22, 22);
        font-size: large;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link-wrapper{
        display: none;
        width: 100%;
        text-align: center;
        /* padding-top: 10px; */
        flex-direction: column;
    }

    .nav-link-wrapper.active{  /*NOT GETTING ACTIVE*/
        display: flex;
        
    }

}

No matter what I try, the nav-link-wrapper.active does not happen. The nav bar does appear if I change display from 'none' to 'flex' so I know what it should look like, but the 'active' function from javascript doesnt seem to be doing anything.

navbarLinks refers to a collection of elements, not one element. So navbarLinks.classList does not make sense. Try using navbarLinks[0].classList? — qrsngky
– qrsngky, Commented Dec 17, 2022 at 15:51

Jordan · Accepted Answer · 2022-12-17 16:04:05Z

0

Your code should have been showing the first nav-link-wrapper on click. This would have been because you were only storing the FIRST element with class nav-link-wrapper in const navbarLinks due to [0].

In order to fix this, I've changed from getElementsByClassName, which produces a HTMLCollection which is more difficult to iterate, to querySelectorAll which produces an Array of elements.

Then inside your javascript, onclick you need to loop over all the elements stored inside navbarLinks by using forEach.

In order to produce a usable example, I've commented out the @media query and added a pseudo-element to show "TOGGLE"

const toggleButton = document.getElementsByClassName('hamburger')[0];
const navbarLinks = document.querySelectorAll('.nav-link-wrapper');

toggleButton.addEventListener('click', () => {
    navbarLinks.forEach((it) => {
        it.classList.toggle('active');
    });
});

/* @media only screen and (max-width: 650px) { */
    .hamburger:after { content:'TOGGLE' } /* Remove Me - Just for demo purposes */
    .hamburger{
        display: block;
    }

    .navigation{
        /* display: none; */
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-bottom: 2px solid rgb(185, 22, 22);
        border-top: 2px solid rgb(185, 22, 22);
        font-size: large;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link-wrapper{
        display: none;
        width: 100%;
        text-align: center;
        /* padding-top: 10px; */
        flex-direction: column;
    }

    .nav-link-wrapper.active{  /*NOT GETTING ACTIVE*/
        display: flex;
        
    }
/* } */

<div class="navigation">

    <a href="#" class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>

    <div class="nav-link-wrapper">
        <a href="index.html">Home</a>
    </div>


    <div class="nav-link-wrapper">
        <a href="contact.html">Contact</a>
    </div>

</div>

answered Dec 17, 2022 at 16:04

Jordan

1,4973 gold badges10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

codinator Over a year ago

I tried your example and it works, but then I copied the Javascript code into my full one and it still doesn't do anything which makes me think there's an issue elsewhere in my code, do you think that's possible?

Jordan Over a year ago

Almost certainly. Feel free to post a link to the full example and I'll try trace the issue.

codinator Over a year ago

Much appreciated! Here is a link to a repository with what I have going on github.com/Henchen99/responsive_website_dropdown

Jordan Over a year ago

Works fine in codepen: codepen.io/j0r_dan/pen/PoBYaeq

codinator Over a year ago

Thats bizarre! It doesn't seem to work when opening it directly on chrome (at least for me)

|

Collectives™ on Stack Overflow

css javascript active function not working

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related