Can't properly toggle alternative class to a group of html elements via js

var buttonMenu = document.querySelector(".buttonMenu");
buttonMenu.onclick = function() {

    let menuElements = document.getElementsByClassName("buttonMenu");
    menuElements.classList.toggle("active");
}

<nav class="header__nav menuElement">
    <ul class="header__menu">
        <li>
            <a class="menu__link">Product</a>
        </li>
        
        <li>
            <a class="menu__link">Customers</a>
        </li>

        <li>
            <a class="menu__link">Pricing</a>
        </li>

        <li>
            <a class="menu__link">Resources</a>
        </li>
    </ul>
</nav>

 <div class="header__button__container menuElement">
    <a href="#"> <button class="header__button square__button">Sign In</button> </a>
    <a hreef="#"> <button class="header__button square__button">Sign Up</button> </a>
</div>

<img class="color__switch menuElement" id="colorSwitch" src="static/hdrCapsule.svg">

<div class="buttonMenu menuElement">
    <span></span>
</div>