Hamburger icon not showing using React.js

Question

Hamburger icon is not showing on mobile but it actually does working but when I click on icon and it is not showing on mobile.

Below is my HTML:

.hamburger {
  cursor: pointer;
  height: 16px;
  margin: 10px 0 -1px 10px;
  position: relative;
  top: 4px;
  transform: scale(1.1);
  width: 20px;
  z-index: 100
}

@media (min-width:1280px) {
  .hamburger {
    display: none;
    margin: 18px 30px 0 0
  }
  .hamburger.active {
    display: block
  }
}

.hamburger.active span {
  background: #fff
}

.hamburger.active span:first-child {
  left: 50%;
  top: 6px;
  width: 0
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg)
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg)
}

.hamburger.active span:nth-child(4) {
  left: 50%;
  top: 6px;
  width: 0
}

.hamburger span {
  background: #1a1a1a;
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: rotate(0deg);
  transition: transform .25s ease-in-out;
  width: 100%
}

.hamburger span:first-child {
  top: 0
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
  top: 6px
}

.hamburger span:nth-child(4) {
  top: 12px
}

<button class="showMobileMenu inline-block bg-ubx-red text-xxl py-4 px-0 cursor-pointer outline-none focus-outline-none z-50 relative outline-none focus-outline-none text-white w-10 h-8 mobiMenuToggleIsActive xl-hidden" @click="${this._handleShowMenuClick}">
            <div className="hamburger hamburger-btn">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </button>

Where am I going wrong?

Answer 1

Please try to use this approach

---

 <button class="showMobileMenu inline-block bg-ubx-red text-xxl py-4 px-0 
  cursor-pointer outline-none focus-outline-none z-50 relative outline- 
  none focus-outline-none 

text-white // this tailwind class is having issue, white icon is mixing with white background w-10 h-8 mobiMenuToggleIsActive xl- hidden" @click="${this._handleShowMenuClick}"> close

---

    .hamburger {
  cursor: pointer;
  height: 16px;
  margin: 10px 0 -1px 10px;
  position: relative;
  top: 4px;
  transform: scale(1.1);
  width: 20px;
  z-index: 100;
  display: none; /* Hide by default */
}

@media (max-width: 1280px) {
  .hamburger {
    display: none;
    margin: 18px 30px 0 0;
  }
  .hamburger.active {
    display: block;
  }
}

.hamburger.active span:first-child {
  left: 50%;
  top: 6px;
  width: 0;
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
  left: 50%;
  top: 6px;
  width: 0;
}

.hamburger span {
  background: #1a1a1a;
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: rotate(0deg);
  transition: transform 0.25s ease-in-out;
  width: 100%;
}

.hamburger span:first-child {
  top: 0;
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
  top: 6px;
}

.hamburger span:nth-child(4) {
  top: 12px;
}

---

Try this this must work for you .