HTML Markup:
======================
<div class="header-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="logo">
                    <a href="index.html">Coder Team</a>
                </div>
            </div>
            <div class="col-lg-9 text-right">
                <div class="hamburger-menu">
                    <span class="line-top"></span>
                    <span class="line-center"></span>
                    <span class="line-bottom"></span>
                </div>
            </div>
        </div>
    </div>
</div>

=====================
CSS Markup:
======================

.header-top {
    background: #1FA363;
    padding: 20px;
}
.logo a {
    color: #fff;
    font-size: 25px;
}

/*Hamburger-menu START CSS*/
.hamburger-menu {
    cursor: pointer;
    position: absolute;
    right: 0;
}
.hamburger-menu span {
    background: #fff;
    width: 30px;
    height: 3px;
    display: block;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.hamburger-menu:hover .line-top {
    transform: translateY(-100%);
}
.hamburger-menu:hover .line-bottom {
    transform: translateY(100%);
}
.hamburger-menu:hover .line-top.current,
.hamburger-menu:hover .line-bottom.current{
    transform: 0;
}

.hamburger-menu .line-top.current {
    transform: translateY(200%) rotate(135deg);
}
.hamburger-menu .line-center.current {
    opacity: 0;
}
.hamburger-menu .line-bottom.current {
    transform: translateY(-325%) rotate(-135deg);
}
/*Hamburger-menu END CSS*/



======================
js Markup:
======================
$('.hamburger-menu').on('click', function(){
    $('.hamburger-menu .line-top').toggleClass('current');
    $('.hamburger-menu .line-center').toggleClass('current');
    $('.hamburger-menu .line-bottom').toggleClass('current');
});