How to override CSS property while using a toggle button

const toggleButton = document.getElementById("toggle-button");
const navList = document.getElementById("nav-list");

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

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: plum;
  font-family: sans-serif;
}

header {
  width: 100vw;
  height: 100px;
}

.navbar {
  background-color: darksalmon;
  display: flex;
  color: white;
  justify-content: space-around;
  height: 100px;
  align-items: center;
}

.nav-list {
  list-style: none;
}

.nav-list .list-item {
  display: inline-block;
}

.menu {
  display: none;
}

.imgLogo {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  margin-top: 15px;
  margin-left: 15px;
}

.active {
  display: block;
}


@media only screen and (max-width: 490px) {
  .navbar {
    flex-direction: column;
  }
  .menu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .nav-list {
    width: 100%;
    background-color: darksalmon;
    padding-top: 240px;
    display: none;
  }
  .nav-list .list-item {
    display: block;
    border-top: 1px solid white;
    padding: 10px;
  }
  .nav-list .list-item:last-child {
    border-bottom: 1px solid white;
  }
}

<header>
  <nav class="navbar">
    <div class="menuLogo">
      <img src="imgs/logo-desktop.svg" class="imgLogo">
    </div>
    <ul class="nav-list" id="nav-list">
      <li class="list-item">Home</li>
      <li class="list-item">Menu</li>
      <li class="list-item">Rewards</li>
      <li class="list-item">Gift Cards</li>
      <li class="list-item">Stores</li>
    </ul>
    <div class="menu" id="toggle-button">
      <img src="imgs/menu-burguer-open.svg">
    </div>
  </nav>
</header>

I’m building a responsive top navbar with a toggle button, and trying to change a CSS property from display:none to display:block, but I can’t get it to work.

The menu is receiving the class “show” with the display:block property in it, from the toggle button (confirmed watching the code on dev tools of the browser), but the old display:none is not being overriden by the new property.

I’m a newbie and I have no idea what I’m doing. Is there any obvious code-hierarchy I’m missing?

The “nav-list” UL is the one receiving the “active” property, but its display property won’t change.

Answer

Just use !important in the .active class:

.active {
  display: block !important;
}

!important overrides the previous styling rules for this element, it adds importance to the property.

Advertisement

Answer