I have burger/X icons for mobile nav menu. When closed the burger stays in position as it should. When menu is open the X icon scrolls with the menu. Any ideas to keep it in place?
#ham {
text-decoration: none;
cursor: pointer;
left: 15px;
position: absolute;
top: 38px;
z-index: 125;
font-size: 28px;
font-family: 'FontAwesome';
display: inline-block;
font-weight: normal;
}
#ham.active {
top: -20px;
left: -10px;
font-size: 38px;
}
#ham .fa-bars {
color: #fff;
font-style: normal;
}
.active .fa-bars {
display: none;
}
#ham .fa-window-close {
display: none;
}
.active .fa-window-close {
display: inline-block !important;
color: #303030;
font-style: normal;
transition: transform 0.6s easeInSine;
}<span class="" id="ham" onclick="this.classList.toggle('active')">
<i class="fas fa-bars"></i>
<i class="fas fa-window-close"></i>
</span>