<a class="mobileMenu" href="#">
<div class="menuIconWrap">
<div class="hmbrg">

</div>

</div>
</a>

.menuIconWrap .hmbrg{
position: relative;
width: 30px;
height: 3px;
background: #12939a;
}
.menuIconWrap .hmbrg:after, .menuIconWrap .hmbrg:before{
position: absolute;
content: "";
top: 0;
left: 0;
width: 30px;
height: 3px;
background: #12929a;
transition: margin .3s ease .3s, transform .3s ease .3s;
}
.clicked.hmbrg{

}
.clicked.hmbrg:after, .clicked.hmbrg:before{
margin-top: 0;
transform: rotate(90deg);
transition: margin .3s ease 0s, transform .3s ease .3s;
}
.menuIconWrap .hmbrg:after{
margin-top: 7px;
}
.menuIconWrap .hmbrg:before{
margin-top: -7px;
}
.cross{
transform: rotate(45deg);
transition: all .3s ease .4s !important;
}