<nav>
<div class="hamburger-menu"><span></span><span></span><span></span></div>
<ul>
<li> <a href="$HOME_PAGE_LINK$/blog">Блог</a> </li>
<li> <a href="$HOME_PAGE_LINK$/publ">Каталог</a> </li>
<li> <a href="$HOME_PAGE_LINK$/load">Крафт</a> </li>
<li> <a href="$HOME_PAGE_LINK$/index/kontakty/0-4">Контакты</a> </li>
<li> <a href="$HOME_PAGE_LINK$/index/info/0-2">О нас</a> </li>


</ul>
</nav>

nav {
background-color: #1D252E;

}

nav a {
text-decoration: none;
color: white;
}

nav ul {
margin: 0;
overflow: hidden;
padding: 0;
display: flex;
justify-content: center;
transition: max-height 0.3;
}

nav ul li {
list-style-type: none;

}

nav ul li .active {
background: #27ae60;
}

.hamburger-menu {
height: 53px;
width: 100%;
position: relative;
display: none;
cursor: pointer;
padding: 0 0 20px 0;
}

.hamburger-menu span:nth-child(2) {
height: 4px;
width: 28px;
background: white;
position: absolute;
top: 0;
transition: 0.3s ease;
transform: rotate(0deg);
}

.hamburger-menu span:first-child {
height: 4px;
width: 28px;
background: white;
content: '';
position: absolute;
top: 10px;
transition: 0.3s ease;
transform: rotate(0deg);
}

.hamburger-menu span:last-child {
height: 4px;
width: 28px;
background: white;
content: '';
position: absolute;
top: -10px;
transition: 0.3s ease;
transform: rotate(0deg);
}

.hamburger-menu.opening span:first-child {
top: 0;
transform: rotate(-45deg);
}

.hamburger-menu.opening span:nth-child(2) {
transform: -45px;
opacity: 0;
}

.hamburger-menu.opening span:last-child {
top: 0;
transform: rotate(45deg);
}

@media screen and (max-width: 600px) {
.hamburger-menu {
display: flex;
justify-content: left;
top: 25px;
left:15px;
}

nav ul {
max-height: 0;
display: block;
}

.showing {
max-height: 20em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 10px;
}
}

<script type="text/javascript">
$('.hamburger-menu').click(function(){
$('nav ul').toggleClass('showing');
$('.hamburger-menu').toggleClass('opening');
})

</script>