Navigation Bar Style 1

HTML

    <div class="dummy-body">
      <!-- Header -->
      <header class="nav1-header" id="nav1-header">
        <div class="nav-container">
          <div class="nav-wrap">
            <!-- Logo -->
            <div class="nav-logo-sticky">
              <a href="#">
                <img src="https://nuitwebtek.com/wp-content/uploads/2023/10/Logo.png" alt="" class="nav-logo-image" />
              </a>
            </div>
            <!-- Logo -->
  
            <!-- Left Menu -->
            <div class="nav-row nav-row-left">
              <nav class="nav-menu">
                <ul class="nav-list">
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Home</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">About</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Features</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Testimonials</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Contact Us</a>
                  </li>
                </ul>
              </nav>
            </div>
            <!-- Left Menu End  -->
  
            <!-- Logo -->
            <div class="nav-logo">
              <a href="#">
                <img src="https://nuitwebtek.com/wp-content/uploads/2023/10/Logo.png" alt="" class="nav-logo-image" />
              </a>
            </div>
            <!-- Logo -->
  
            <!-- right Menu -->
            <div class="nav-row nav-row-right">
              <div class="nav-right-bar">
                <!-- Nav Search -->
                <div class="nav-search nav-mobile-search">
                  <form action="" class="nb-page-search">
                    <input type="search" id="nb_search" name="nb_search" />
                    <label for="submit" class="nb-btn-style-3" id="nb-search-send"><i class="fa-solid fa-magnifying-glass"></i></label>
                    <!-- <input type="submit" id="submit" /> -->
                  </form>
                </div>
                <!-- Nav Search End -->
  
                <div class="nav-btn-extra nav-menu">
                  <ul class="nav-list">
                    <li class="nav-item">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1"> Log In / Sign Up </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- right Menu End -->
  
            <!-- Hamburger -->
            <div class="nav-mobile-btn sm-block lg-none">
              <div class="sm-search-wrapper">
                <button class="sm-search">
                  <i class="fa-solid fa-magnifying-glass"></i>
                </button>
                <form action="">
                  <input type="text" />
                  <!-- <input type="submit"> -->
                </form>
              </div>
              <button class="sm-contact">
                <span><a href="tel:1234567891"><i class="fa-solid fa-headset"></i></a></span>
              </button>
              <button class="nb-toggler nb-collapsed lg-none sm-block" type="button">
                <div class="nbbar-toggler-icon">
                  <span class="toggler-bars"></span> 
                  <span class="toggler-bars"></span>
                  <span class="toggler-bars"></span>
                </div>
              </button>
            </div>
            <!-- Hamburger End -->
  
            <!-- Moble Start -->
            <div class="nav-mobile-canvas"  id="nav-mobile-canvas">
              <nav class="nav-menu">
                <div class="nav-menu-wrap1">
                  <ul class="nav-list">
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Home</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">About</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Features</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Testimonials</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-2 font-style-1">Contact Us</a>
                    </li>
                  </ul>
                  <div class="nav-btn-extra nav-menu">
                    <ul class="nav-list">
                      <li class="nav-item">
                        <a href="#" class="nb-item-link nb-btn-style-1 font-style-1"> log-in/ Sign Up </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="nav-menu-wrap2">
                  <div class="sm-social-contacts lg-none sm-block">
                    <span><i class="fa-brands fa-instagram"></i></span>
                    <span><i class="fa-brands fa-facebook"></i></span>
                    <span><a href="tel:+910000000000">+000-000-0000</a></span>
                  </div>
                </div>
              </nav>
            </div>
            <!-- Moble End -->
          </div>
        </div>
      </header>
      <!-- Header End -->

    </div>

CSS

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

.dummy-body {
    color: #fff;
    height: 200vh;
    background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80);
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Required CSS */

a{
    color: inherit;
}
.nav1-header {
    padding-block: 1rem;
    background-color: #3C3E27;
    position: absolute;/* change to fixed on your website */
    top: 0;
    left: 0;
    width: 100%;
    transition: .5s;
    
    .nav-menu ul {
        display: flex;
        list-style: none;
        padding: 0;
        flex-wrap: wrap;
        margin-bottom: 0    ;


        & a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
        }
    }

    .nav-container {
        max-width: 1320px;
        margin: auto;
        width: 100%;
        padding-inline: 1rem;
    }

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

    .nav-row {
        display: flex;
        align-items: center;
        width: 40%;
        
        &.nav-row-right {
            justify-content: end;

            & .nav-right-bar {
                display: flex;
            }
        }
    }

    .nav-search {
        margin-right: 1.5rem;
        display: flex;
        align-items: center;
    }

    .nav-logo {
        width: 20%;
        text-align: center;
        transition: 1s;
    }

    .nav-mobile-canvas  {
        display: none;
    }

    .nav-logo-sticky {
        scale: 0;
        width: 0;
        transition: .5s;
    }

    .nav-btn-extra a {
        border: solid 1px #fff;
        padding: 10px 20px;
        text-align: center;
        border-radius: 10px;
    }

    /* Desktop Only */
    @media only screen and (min-width:1201px) {
        
        &.nav-header-sticky {
            padding-block: .5rem;
    
            .nav-logo-sticky {
                scale: 1;
                width: 20%;
            }
    
            .nav-logo {
                scale: 0;
                width: 0;
            }
        }
    }


    /* Tab + Moblie */
    @media only screen and (max-width:1200px) {
        


        .nav-row {
            display: none;
        }

        .nav-logo-sticky {
            display: none;
        }

        .nav-mobile-canvas {
            position: fixed;
            width: 90%;
            height: 100%;
            top: 0px;
            left: 10%;
            background-color: #3C3E27;
            display: grid;
            align-content: center;
            text-align: center;
            /* transition: 1s; */

            .nav-menu .nav-list {
                flex-wrap: wrap;

                & li {
                    width: 100%;
                    padding: 5px 10px;
                    /* border-bottom: solid 1px #fff; */
                }

                & li:last-child {
                    border-bottom: none;
                }
            }

            .nav-menu .nav-list a {
                font-size: 20px;
            }
        }
            .nav-wrap {
                width: 95%;
                margin: auto;
            }
    }
    /* Tab + Moblie End */


}


/* Retained from style2.css */



body.overflow-y-0 {
    overflow-y: hidden;
}

body a {
    color: inherit;
    text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

.lg-none {
    display: none;
}



.font-style-1 {
    color: #fff;
    font-family: 'Ubuntu';
    font-size: 18px;
}

.nb-item-link {
    text-decoration: none;
}

.nb-btn-style-1 {
    display: inline-flex;
    padding: 12px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #fff;
    transition: 0.5S;
}

.nav1-header .nb-btn-style-1:hover {
    color: #242517;
    background: #fff;
}

.nb-btn-style-2 {
    display: inline-flex;
    padding: 12px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    position: relative;
    margin-inline: 5px;
}

.nb-btn-style-2::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    bottom: 0;
    background-color: #fff;
    opacity: 0.0;
    transition: 0.5s;
}
.nb-btn-style-2:hover::after, .nb-btn-style-2:active::after{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    bottom: 0;
    opacity: 1.0;
}
.nb-btn-style-3 {
    background: transparent;
    border: 1px solid transparent;
    font-size: 16px;
    color: #000;
}

.nb-page-search {
    position: relative;
    right: -5px;
    width: 225px;
    height: 32px;
    border-radius: 18px;
}

.nb-page-search input[name="nb_search"] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    padding-left: 10px;
}

#nb-search-send{
    position: absolute;
    z-index: 1;
    left: 87%;
    top: 0px;
    border-radius: 50%;
    width: 30px;
    aspect-ratio: 1/1;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.contacts{
    margin-inline: 20px;
}
@media only screen and (max-width:1200px) {

    /* code  */
    .sm-none {
        display: none;
    }

    .sm-block {
        display: block;
    }
    .nb-page-search {
        position: absolute;
        right: -20px;
        bottom: -60px;
        width: 0;
        transition: 0.2s linear;
    }
    .nb-page-search input[name="nb_search"], #nb-search-send {
        padding: 0;
        visibility: hidden;
        transition: 0.3s linear;
    }
    .nav-mobile-btn{
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .sm-search, .sm-contact{
        font-size: 18px;
        background-color: transparent;
        outline: none;
        border: none;
        color: #fff;
    }
    .sm-search-wrapper{
        position: relative;
    }
   .sm-search-wrapper form{
    position: absolute;
    width: 0;
    height: 30px;
    bottom: -70px;
    left: -160px;
    border-radius: 20px;
    transition: 0.2s linear;
    transform-origin: center;
    z-index: 1;
}
    .sm-search-wrapper form.showsearch{
        width: 360px;
    }
   .sm-search-wrapper form input{
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        border-radius: inherit;
        padding-left: 0;
    }
        .sm-search-wrapper form.showsearch input{
        padding-left: 10px;
    }
    .nbbar-toggler-icon{
        position: relative;
        width: 25px;
        height: 20px;
        display: grid;
    }
    .nbbar-toggler-icon .toggler-bars{
        width: 100%;
        height: 3px;
        border-radius: 10px;
        background-color: #FFF;
        transition: 0.6s ease-in;
    }
    .navclose .nbbar-toggler-icon span:nth-child(2){
        transform: translateX(-6px);
    }
    .navclose .nbbar-toggler-icon span:nth-child(3){
        transform: translateX(-12px);
    }
    .nb-toggler {
        background: transparent;
        outline: none;
        border: none;
        position: relative;
        z-index: 2;
    }
    .sm-social-contacts {
        padding-bottom: 20px;
        display: flex;
        gap: 15px;
        justify-content: center;
    }
    .sm-social-contacts i,
    .sm-social-contacts a {
        color: #fff;
        font-size: 20px;
    }
    #nb-search-send{
        left: 90%;
    }
}
@media only screen and (min-width:489px) and (max-width:1200px){
    .nb-page-search {
        position: absolute;
        right: 20px;
        bottom: 0px;
        width: 0;
        transition: 0.2s linear;
    }
    }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


.nav-mobile-canvas{
    transform: translateX(100%);
    transition:  0.5s ease-in ;
    border-radius: 50%;
}
.navshow.nav-mobile-canvas {
    transform: translateX(0);
    border-radius: 0%;
}
.nav-mobile-canvas .nav-menu{
    display: grid;
    margin: auto;
    justify-content: space-between;
    grid-template-rows: 120%;
}
.nav-btn-extra.nav-menu {
    display: flex;
    justify-content: center;
}

JS

jQuery(document).ready(function(){
    

let body = document.querySelector('body');
let dummyBody = document.querySelector('.dummy-body');
let navHeader = document.getElementById('nav1-header');
let navToggler = navHeader.querySelector('.nb-toggler');
let smNav = navHeader.querySelector('.nav-mobile-canvas');
let navTogglerIcon = navHeader.querySelector('.nbbar-toggler-icon i')
let searchWrapper = document.querySelector('.sm-search-wrapper form')
let searchBtn = document.querySelector('.sm-search');

//sticky Header flip
//Unlock this code on your website
 window.addEventListener('scroll', onscroll_function);
 function onscroll_function(){
     if (window.scrollY > 50){
         navHeader.classList.add('nav-header-sticky');
     } else {
         navHeader.classList.remove('nav-header-sticky');
     }
}



// Remove this code on your website 
 dummyBody.addEventListener('scroll', () => {
  let  dummyBodyHeight = dummyBody.getBoundingClientRect();
       console.log(`The Height is : ${dummyBodyHeight.height}`);
 })


// show/hide Mobile Nav 
navToggler.addEventListener('click',  show_hide_Nav);

function show_hide_Nav(e){
    smNav.classList.toggle('navshow')
    navToggler.classList.toggle('navclose')
}


// show search on click on search icon 
searchBtn.addEventListener('click', () => {
    searchWrapper.classList.toggle('showsearch')
})
    
    });

Links

  <!-- font-ubuntu -->
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet" />

    <!-- fontawesome -->
    <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" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />

Scripts

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Navigation Bar Style 1

Note:

HTML

CSS

JS

Links

Scripts