The hamburger icon is not appearing on mobile, even though it seems to be working. However, when I click on the icon, it does not show up on mobile devices.
Here is my HTML code:
.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>What could be the issue here?