From Normal Menu to Hamburger Menu

The position of the hamburger menu-btn, absolute.
.menu-btn {
cursor: pointer;
position: absolute;
top: 20px;
right: 30px;
z-index: 2;
display: none;
}

Media query:
@media(max-width:700px) {
.menu-btn {
display: block;
}

/* move the search & cart icons */
.main-nav ul.nav-right {
margin-right: 50px;
}

/* move the horizontal nav menu to left side, with slide in effect animation */
.main-nav ul.nav-menu {
display: block;
position: absolute;
top: 0;
left: 0;
background:#f2f2f2;
width: 50%;
height: 100%;
border-right: #ccc 1px solid;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease-in-out;

}

.main-nav ul.nav-menu.show {
    transform: translateX(-20px);  
}

/* CSS of the left menu */
.main-nav ul.nav-menu li {
padding: 10px;
border-bottom: #ccc solid 1px;
font-size: 14px;
}

.main-nav ul.nav-menu li:last-child {
    border-bottom: none;
}

}

/* Add JS to the btn click function -- toggle class .show*/

document.querySelector('.menu-btn').addEventListener('click', ()=> document.querySelector('.nav-menu').classList.toggle('show'));