.mgE {
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.mgE hr {
    left: 10px;
    border: none;
    margin: 0;
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: var(--black);
    transition: all .25s ease;
}

.mgE hr { top: 24px; }

.mgE hr:first-child { top: 15px; }

.mgE hr:last-child { top: 33px; }

body.nav .mgE hr:first-child,
body.nav .mgE hr:last-child {
    width: 0;
    top: 15px;
    margin: 15px;
    opacity: 0;
}

body.nav .mgE hr:nth-child(2) { transform: rotate(45deg); }

body.nav .mgE hr:nth-child(3) { transform: rotate(-45deg); }