header nav

<header>
    <div class="container">
        <h1><a href="#">logo</a></h1>
        <nav class="main-navigation">
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
            <a href="#">menu</a>
        </nav>
        <button class="more-btn">
            <i class="icon"></i>
        </button>
    </div>
</header>

header {position: absolute;top: 0;left: 0;width: 100%;padding: 20px 0;z-index: 3; } 
header h1 {position: relative;height: 40px;margin:0;float: left;z-index: 3; } 
header h1 img {display: block;position: relative;top:10px; }  
.main-navigation {float: right; } 
.main-navigation a {color: #fff;margin-left: 20px; } 
.main-navigation a.active {font-weight: bold;border-bottom: 2px solid #004fff; } 
.more-btn {display: none;}

@media screen and (max-width: 768px) {
header {padding: 0;height: 56px; } 
header h1 {height: 56px; } 
header h1 img {top:20px;height: 16px; } 
.main-navigation {position: fixed;top:0;right:0;padding:80px 20px;width: 100%;height: 100vh;background-color: rgba(14,25,38,0.9);opacity: 0;visibility: hidden;transform: translateX(100%);transition: 0.3s; } 
.main-navigation.active {opacity: 1;visibility: visible;transform: translateX(0);transition: 0.3s; } 
.main-navigation a {display: block;margin:auto;margin-bottom:8px;padding:12px;}
.main-navigation a.btn {text-align: center; } 
.more-btn {display: block;position: absolute;right:12px;top:8px;width:40px;height: 40px;border-radius: 8px;border:none;background-color: transparent; } 
.more-btn .icon {display: block;width:24px;height: 24px;margin: 0 auto;background: url(../assets/icon-menu.svg) no-repeat center;background-size: contain; } 
.more-btn.active .icon {background: url(../assets/icon-close.svg) no-repeat center;background-size: contain; } 
 }

$(document).ready(function () {
    $('.more-btn').click(function(){
        $(this).toggleClass('active');
        $('.main-navigation').toggleClass('active');
    })
});