How can I change dropdown menu active background color with Bootstrap 4?

Question

How do I change the background color of this menu only when expanded?

When inactive I want the background as shown, however, when the menu is active I'd like the color to change to a light grey. I can't work out how to do this without changing the whole background for both states.

Here is my code:

 <nav
      class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3"
      id="mainNav"
    >
      <button
        class="hamburger hamburger--squeeze"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto pt-2">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Illustration <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Graphic Design</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav> 

I already have this scroll function for all screens:

window.addEventListener('scroll', function (event) {
        event.preventDefault();

        if (window.scrollY <= 50) {
          nav.style.backgroundColor = 'transparent';
        } else {
          nav.style.backgroundColor = '#fff';
          nav.style.opacity = '0.9';
          nav.style.transition = '0.4s ease';
        }

Answer 1

If you are using this css plugin you can remove the scroll event and use a click event handler:

document.querySelectorAll(".hamburger").forEach(function(hamburger) {
    hamburger.addEventListener("click", function() {
        var nav = document.querySelector('#mainNav');
        if (this.classList.contains('is-active') == false) {
            nav.style.backgroundColor = 'red';
            nav.style.opacity = '0.9';
            nav.style.transition = '0.4s ease';
        } else {
            nav.style.backgroundColor = 'transparent';
        }
        this.classList.toggle("is-active");
    }, false);
});

The snippet:

 document.querySelectorAll(".hamburger").forEach(function(hamburger) { hamburger.addEventListener("click", function() { var nav = document.querySelector('#mainNav'); if (this.classList.contains('is-active') == false) { nav.style.backgroundColor = 'red'; nav.style.opacity = '0.9'; nav.style.transition = '0.4s ease'; } else { nav.style.backgroundColor = 'transparent'; } this.classList.toggle("is-active"); }, false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jonsuh/hamburgers@master/dist/hamburgers.min.css"> <nav class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3" id="mainNav"> <button class="hamburger hamburger--squeeze" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto pt-2"> <li class="nav-item active"> <a class="nav-link" href="#">Illustration <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Graphic Design</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>

Answer 2

Try to update the default css for toggle button and styling active by this css tag:

[aria-expanded="true"] {
   /* your custom style here */
}