Navigation Bar Style 7

HTML

    
<!-- Header -->
<header class="nav-7-header" id="nav-7-header">
    <div class="nav-7-container">
        
        <div class="nav-7-row nav-7-row-style">

            <div class="nav-7-header-mobile">
                <div class="nav-7-logo">
                    <a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Logo-1.png" alt=""></a>
                </div>
                <button class="nav-7-mob-btn">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
 
            <!-- Navigation -->    
            <nav class="nav-7-nav nav-7-mobile">
                <ul class="nav-7-list">
                    <li class="nav-7-item nav-7-link"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Gallery.svg"> <span>Home</span></a></li>
                    <li class="nav-7-item nav-7-link nav-7-item-has-child nav-7-item-has-mega-menu"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Products.svg"> <span>Products</span></a>
                    
                        <!-- Mega Menu -->
                        <ul class="nav-7-submenu">
                            <li class="nav-7-item nav-7-mega-menu">
                                <div class="nav-7-mega-menu-wrap">
                                    
                                    <div class="nav-7-mega-row">

                                        <!-- Col -->
                                        <div class="nav-7-mega-col nav-7-mega-col-25">
                                            <h3 class="nav-7-title">Main Product 1</h3>
                                            <ul class="nav-7-mega-list">
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                            </ul>
                                        </div>
                                        <!-- Col End -->

                                        <!-- Col -->
                                        <div class="nav-7-mega-col nav-7-mega-col-25">
                                            <h3 class="nav-7-title">Main Product 2</h3>
                                            <ul class="nav-7-mega-list">
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                            </ul>
                                        </div>
                                        <!-- Col End -->

                                        <!-- Col -->
                                        <div class="nav-7-mega-col nav-7-mega-col-25">
                                            <h3 class="nav-7-title">Main Product 3</h3>
                                            <ul class="nav-7-mega-list">
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                            </ul>
                                        </div>
                                        <!-- Col End -->

                                        <!-- Col -->
                                        <div class="nav-7-mega-col nav-7-mega-col-25">
                                            <h3 class="nav-7-title">Main Product 4</h3>
                                            <ul class="nav-7-mega-list">
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                                <li class="nav-7-mega-menu-item nav-7-item"><a href="#">Product</a></li>
                                            </ul>
                                        </div>
                                        <!-- Col End -->

                                    </div>

                                    <div class="nav-7-mega-row">
                                        <div class="nav-7-mega-col">
                                            <h3 class="nav-7-title">Recently Viewed Products</h3>
                                            <div class="nav-7-product-list owl-theme owl-carousel">

                                                <!-- item -->
                                                <div class="nav-7-product-item item">
                                                    <a href="#"><img src="https://img.freepik.com/free-photo/beautiful-scenery-summit-mount-everest-covered-with-snow-white-clouds_181624-21317.jpg?t=st=1701175264~exp=1701175864~hmac=7921c0c64c9356f3360d4caeae46871ecf597d128c312455b112358bed7c3675" alt=""></a>
                                                </div>
                                                <!-- item End -->

                                                <!-- item -->
                                                <div class="nav-7-product-item item">
                                                    <a href="#"><img src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1701175264~exp=1701175864~hmac=03c75797ab5c93808a2d8514eb8e89ee5a23ca7bbaf5856e33f827ab3af1372e" alt=""></a>
                                                </div>
                                                <!-- item End -->

                                                <!-- item -->
                                                <div class="nav-7-product-item item">
                                                    <a href="#"><img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1701175264~exp=1701175864~hmac=28504e7c2ce9ca5de9bf7cc9a914f52d6e9881843c655605788ff650fbdfcea2" alt=""></a>
                                                </div>
                                                <!-- item End -->

                                                <!-- item -->
                                                <div class="nav-7-product-item item">
                                                    <a href="#"><img src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1701175264~exp=1701175864~hmac=03c75797ab5c93808a2d8514eb8e89ee5a23ca7bbaf5856e33f827ab3af1372e" alt=""></a>
                                                </div>
                                                <!-- item End -->

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </li>
                        </ul>
                        <!-- Mega Menu End -->
                    
                    </li>
                    <li class="nav-7-item nav-7-link nav-7-item-has-child"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Team.svg"> <span>Community</span></a>
                        
                        <!-- Sub menu -->
                        <ul class="nav-7-submenu">
                            <li class="nav-7-item nav-7-link">
                                <a href="#">Menu 1</a>
                            </li>
                            <li class="nav-7-item nav-7-link">
                                <a href="#">Menu 2</a>
                            </li>
                        </ul>
                        <!-- SUb menu End -->

                    </li>
                    <li class="nav-7-item nav-7-link"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/home.svg"> <span>Gallery</span></a></li>
                    <li class="nav-7-item nav-7-link"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/FAQ.svg"> <span>Feedback</span></a></li>
                    <li class="nav-7-item nav-7-link"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Feedback.svg"> <span>FAQ</span></a></li>
                    <li class="nav-7-item nav-7-link"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/12/Phone.svg"> <span>Contact</span></a></li>
                </ul>
            </nav>
            <!-- Navigation End -->

        </div>

    </div>
</header> 
<!-- Header End -->

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: rgba(59, 59, 66, .5);
}

.nav-7-header {
    max-width: 125px;
    background-color: #1F1F23;
    height: 100vh;
    position: fixed;
    transition: .5s;
    left: 0;
    top: 0;
    /* overflow: hidden; */
    z-index: 9999;
    font-family: var(--theme-font-primary);

    --theme-font-primary:'Montserrat', sans-serif;
}

.nav-7-row-style {
    background-color: #1F1F23;
}

.nav-7-logo {
    min-height: 90px;
    display: grid;
    align-content: center;
    padding-inline: 20px;

    & img {
        width: 100%;
        max-height: 90px;
        max-width: 150px;
        object-fit: contain;
    }
}

.nav-7-list {
    color: #fff;
    list-style: none;

    .nav-7-item a {
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        font-family: var(--theme-font-primary);
        transition: .15s;

        &:hover {
            color: #E04646;
        }
    }

    > .nav-7-item {
        min-height: 65px;
        margin-bottom: 1rem;
        display: flex;
        align-content: center;
        padding-right:50px;
        padding-left: 50px;
        justify-content: space-between;
    }

}

.nav-7-container, 
.nav-7-row,
.nav-7-nav {
    height: 100%;
}

.nav-7-link > a span {
    opacity: 0;
    transition: .25s;
    margin-left: 1rem;
}


.nav-7-header:hover .nav-7-link > a span {
    opacity: 1;
}

.nav-7-header:hover {
    max-width: 250px;
}

.nav-7-item-has-child:hover .nav-7-mega-menu {
    left: calc(0% + 200px);
}

.nav-7-mega-menu {
    position: fixed;
    width: calc(100% - 200px);
    background-color: rgba(59, 59, 66, 1);
    top: 0;
    z-index: -1;
    height: 100%;
    transition: 1s;
    left: -100%;
}

.nav-7-mega-row {
    display: flex;
    flex-wrap: wrap;
}

.nav-7-mega-col {
    width: 100%;
}

.nav-7-mega-col-25 {
    max-width: 25%;
}

.nav-7-item.nav-7-mega-menu {
    align-content: start;
    padding:3rem;
    padding-left: 100px;
}

.nav-7-mega-list {
    list-style: none;
    padding: 0;
}

.nav-7-mega-list li {
    margin-bottom: 1rem;
}

.nav-7-title {
    margin-bottom: 1.5rem;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--theme-font-primary);
    color: #fff;
}

.nav-7-mega-col {
    margin-bottom: 1.5rem;
}

.nav-7-submenu {
    list-style: none;
}

.nav-7-item-has-child:not(.nav-7-item-has-mega-menu) {
    position: relative;

    .nav-7-submenu {
        position: absolute;
        left: -100%;
        list-style: none;
        background-color: rgba(59, 59, 66, 1);
        min-width: 250px;
        z-index: -1;
        transition: .5s;
    }

    &:hover .nav-7-submenu {
        left: 100%;
    }

    .nav-7-item {
        padding: 1rem;
    }
}

.nav-7-item-has-child {
    position: relative;
    display: flex;
    align-items: center;

    & .nav-7-arrow::after {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/12/arrow-right.svg);
        background-size: contain;
        background-repeat: no-repeat;
        right: -20px;
        background-position: center;
    }
}


.nav-7-header .nav-7-item-has-child .nav-7-arrow::after {
    opacity: 0;
    transition: .25s;
}

.nav-7-header:hover .nav-7-item-has-child .nav-7-arrow::after {
    opacity: 1;
}

.nav-7-mob-btn {
    display: none;
    background-color: transparent;
    border: none;
    padding: 1rem;
}

.nav-7-mob-btn span {
    background-color: #fff;
    height: 1.5px;
    border-radius: 10px;
    width: 40px;
    margin-bottom: 12px;
    display: block;
    transition: .5s;

    &:last-child {
        margin-bottom: 0;
    }
}

.nav-7-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}

@media only screen and (max-width:991px) {
    .nav-7-mob-btn {
        display: block;
    }

    .nav-7-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-7-header:hover {
        max-width: 100%;
    }

    .nav-7-header {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .nav-7-link > a span {
        opacity: 1;
    } 

    .nav-7-header .nav-7-item-has-child .nav-7-arrow::after {
        opacity: 1;
        transition: .25s;
        width: 30px;
        height: 30px;
        background-size: 8px;
    }

    .nav-7-list > .nav-7-item {
        padding-inline:20px;
    }

    .nav-7-item-has-child .nav-7-arrow::after  {
        right: 0px;
    }

    .nav-7-mobile {
        left: -100%;
        transition: .25s;;
        transition: .25s;
        position: fixed;
        height: 100vh;
        background-color: #1F1F23;
        width: 100%;
    }

    .nav-7-mobile.active {
        left: 0
    }

   .nav-7-mob-btn.active {
        & span:first-child {
            scale: 1.2;
        }

        & span:nth-child(2) {
            scale: 1;
        }
        & span:last-child {
            scale: 0.8;
        }
   
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu):hover .nav-7-submenu {
        left: -100%;
    }

    .nav-7-item-has-child:hover .nav-7-mega-menu {
        left: calc(-100%);
    }


    .nav-7-item-has-child .nav-7-mega-menu {
        width: 100%;
        z-index: 1;
        transition: .5s;
    }

    .nav-7-item-has-child.active  .nav-7-mega-menu {
        left: 0;
        padding-left: 3rem;
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        width: 100%;
        height: 100vh;
        z-index: 1;
        top: 0;
        position: fixed;
    }



    .nav-7-item-has-child.active:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        left: 0;
    }

    .nav-7-mega-col-25 {
        max-width: 100%;
    }

    .nav-7-item-has-child .nav-7-mega-list {
        transition: .5s;
        overflow: hidden;
        height: 0;
    }

    .nav-7-item-has-child .nav-7-mega-list.active {
        height:200px;
    }

    .nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu {
        padding: 3rem;
    }


}  

.menu-back {
    position: relative;
    font-size: 18px;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    color: #fff;
}

.menu-back::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/12/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0px;
    background-position: center;
    transform: rotate(180deg);
    margin-top: 2.5px;
}

JS

jQuery(document).ready(function () {

    //Product Slider
    let productList = jQuery('.nav-7-product-list.owl-theme');

    productList.owlCarousel({
        loop: true,
        margin: 10,
        nav: false,
        dots: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    })



    jQuery(".nav-7-item-has-child .nav-7-submenu").after("<i class='nav-7-arrow'></i>");

    //Mobile menu
    jQuery('.nav-7-mob-btn').on('click', function () {

        if (jQuery(this).hasClass('active')) {
            jQuery(this).removeClass('active');

        } else {
            jQuery(this).addClass('active');
        }

        if (jQuery('.nav-7-mobile').hasClass('active')) {
            jQuery('.nav-7-mobile').removeClass('active');

        } else {
            jQuery('.nav-7-mobile').addClass('active')
        }

    })

    //Mobile disable Hover
    if (jQuery(window).width() < 1100) {

        jQuery(".nav-7-item-has-child .nav-7-submenu .nav-7-mega-menu-wrap").before("<h4 class='menu-back'>Back</h4>");

        jQuery(".nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .nav-7-submenu > li:first-child").before("<h4 class='menu-back'>Back</h4>");

        //mobile Submenu click
        jQuery('.nav-7-item-has-child .nav-7-arrow').on('click', function () {
            jQuery(this).parent().addClass('active');
            console.log('test')
        })

        //mobile Submenu click
        jQuery('.nav-7-item-has-child .nav-7-title').on('click', function () {
            jQuery('.nav-7-mega-list').removeClass('active');
            jQuery(this).parent().find('.nav-7-mega-list').addClass('active');
        })

        jQuery('.nav-7-item-has-child.nav-7-item-has-mega-menu .menu-back').on('click', function () {
            jQuery(this).parent().parent().parent().removeClass('active');
        })

        jQuery('.nav-7-item-has-child:not(.nav-7-item-has-mega-menu) .menu-back').on('click', function () {
            jQuery(this).parent().parent().removeClass('active');
        })

    }



});

Links

 <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:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>