Navigation Bar Style 6

HTML

  <div class="nav6-main">
        <div class="nav-wrapper">
            <header>
                <nav>
                    <div class="nav-logo-humBtn-container">
                        <div class="logo-wrap">
                            <a href="#">
                                <img class="logo-img" src="https://nuitwebtek.com/wp-content/uploads/2023/11/dLogo.png" alt="Logo">
                            </a>
                        </div>
                        <div class="nav6-btn lg-none sm-block">
                            <button>
                                <span><i class="fa-solid fa-bars"></i></span>
                            </button>
                        </div>
                    </div>
                    <div class="nav-links sm-">
                        <ul>
                            <li><a href="#"><span><i class="fa-solid fa-house"></i></span> <h4 class="links">Home</h4></a> </li>
                            <li><a href="#"><span><i class="fa-solid fa-star"></i></span> <h4 class="links">Features</h4></a> </li>
                            <li><a href="#"><span><i class="fa-solid fa-people-group"></i></span> <h4 class="links">Team</h4></a> </li>
                            <li><a href="#"><span><i class="fa-solid fa-image"></i></span> <h4 class="links">Gallery</h4></a></li>
                        </ul>
                        <ul>
                            <li><a href="#"><span><i class="fa-solid fa-comments"></i></span> <h4 class="links">FAQ</h4></a> </li>
                            <li><a href="#"><span><i class="fa-solid fa-headset"></i></span> <h4 class="links">Contact</h4></a> </li>
                            <li><a href="#"><span><i class="fa-solid fa-question"></i></span> <h4 class="links">Help</h4></a> </li>
                        </ul>
                    </div>
                </nav>
            </header>
        </div>
    </div>

CSS

.nav6-main {
    height: 100vh;
    width: 100%;
    background-color: #E5E5E5;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/11/nav6-bg-img.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lg-none {
    display: none;
}

.nav-wrapper {
    position: absolute; /*Position:Fixed; in your website*/
    top: 45px;
    left: 15px;
}

.nav-wrapper header {
    width: 0;
    background-color: #2F2F39;
    font-family: 'Montserrat', sans-serif;
    padding: 20px 40px 20px 20px;
    border-radius: 20px;
    transition: 0.2s linear;
    overflow: hidden;
}

.nav-wrapper header:hover {
    width: 200px;
}

.logo-wrap a {
    display: inline-block;
}

.logo-wrap a img {
    width: 100px;
}

.nav-links {
    padding-block: 40px;
    display: grid;
    gap: 50px;
}

.nav-links ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 20px;
}

.nav-links ul li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFEDB5;
    font-size: 18px;
    text-decoration: none;
    font-family: inherit;
}

.nav-links ul li a:hover,
.nav-links ul li a:focus {
    color: #FFC100;
}

.nav-links ul li a span {
    width: 25px;
}

.nav-links ul li a h4 {
    margin: 0;
    transition: 0.2s linear;
    opacity: 0;
    color:inherit;
}

.nav-wrapper:hover .links {
    opacity: 1;
}
.nav6-btn button {
    outline: none;
    border: none;
    background-color: transparent;
    /* cursor: pointer; */
}
.nav6-btn button span i {
    font-size: 25px;
    color:#FFEDB5;
}



@media only screen and (max-width:480px) {
    .sm-block {
        display: block;
    }

    .sm-none {
        display: none;
    }

    .nav-wrapper {
        width: 100%;
        left: 0;
        top: 15px;
    }

    .nav-wrapper header {
        padding: 0;
        background-color: transparent;
        width: 100%;
        height: 90px;
        transition: 0.2s linear;
    }
    .nav-wrapper header.Nav6_nav_active{
        /* height: 60vh; */
    }

    .nav-wrapper header:hover {
        width: auto;
    }
    .nav-links{
            /* grid-template-columns: repeat(2, 1fr) */
    }
   .nav-links ul li a h4 {
    opacity: 1;
}
    .nav-wrapper header nav {
        padding: 20px;
        margin: 10px;
        border-radius: 10px;
        background-color: #2F2F39;
    }
    .nav-logo-humBtn-container{
    display: flex;
    justify-content: space-between;
    }
    .nav6-btn{
    display: flex;
    justify-content: end;
}
}

JS

let nav6_wrapper = document.querySelector('.nav-wrapper');
let nav6_header = document.querySelector('.nav-wrapper header');
let nav6_btn = document.querySelector('.nav6-btn button');
let nav6_navTag = document.querySelector('.nav-wrapper header nav');

let navH = nav6_navTag.getBoundingClientRect();
NavH = navH.height;
NavTagH = navH.height + 100;

let NavBtn_isClicked = false;
nav6_btn.addEventListener('click', ()=>{
    nav6_header.classList.toggle('Nav6_nav_active')
    let HumIcon = nav6_btn.querySelector('i');
    HumIcon.classList.toggle('fa-xmark');

    NavBtn_isClicked = !NavBtn_isClicked;
    if(window.screen.width < 600){
     if (NavBtn_isClicked) {
        nav6_header.style.height = `${NavTagH}px`;
    } else {
        nav6_header.style.height = '90px';
    }
    }
   
}
)

console.log('%c ', 'font-size: 0; padding: 100px 100px; background: url("https://media.giphy.com/media/DSxKEQoQix9hC/giphy.gif")');

console.log('%c Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque dui massa, eu luctus lacus ultricies sit amet. Suspendisse auctor, odio bibendum commodo rhoncus, neque ligula ultricies nulla, sed aliquet turpis enim eget nibh. Donec non velit facilisis, vestibulum tellus et, ultrices orci. Phasellus non magna elit.', 'color:red; font-size:50px;font-weight:600;');

Links

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- google fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">