Navigation Bar Style 2

HTML

<!-- do not copy dummy-body -->
<div class="dummy-body">
      <!-- Header -->
      <header class="nav1-header" id="nav1-header">
        <div class="nav-container">
          <div class="nav-wrap">
  
            <!-- Left Menu -->
            <div class="nav-row nav-row-left">
              <nav class="nav-menu sm-none">
                <ul class="nav-list">
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Home</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">About</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Services</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Portfolio</a>
                  </li>
                  <li class="nav-items">
                    <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Contact</a>
                  </li>
                </ul>
              </nav>
              <button class="sm-contact sm-block lg-none">
                <span><a href="tel:+91 1234567891" class="nb-item-link"><i class="fa-solid fa-phone"></i></a></span>
              </button>
            </div>
            
            <!-- Left Menu End  -->
  
            <!-- Logo -->
            <div class="nav-logo">
              <a href="https://nuitwebtek.com/navigation-bar-style-2/">
                <img src="https://nuitwebtek.com/wp-content/uploads/2023/11/vintage-logo.png" alt="" class="nav-logo-image" />
              </a>
            </div>
            <!-- Logo -->
  
            <!-- right Menu -->
            <div class="nav-row nav-row-right">
              <div class="nav-right-bar">
                  <!-- instagram button -->
                <button class="sm-contact sm-none">
                  <span><a href="www.instagram.com" class="nb-item-link"><i class="fa-brands fa-instagram"></i></a></span>
                </button>
                  
                <!--facebook button -->
                  <button class="sm-contact sm-none">
                  <span><a href="www.instagram.com" class="nb-item-link"> <i class="fa-brands fa-facebook"></i></a></span>
                </button>
                  
                <!-- call button -->
                <button class="sm-contact sm-none">
                  <span><a href="tel:+91 1234567891" class="nb-item-link"><i class="fa-solid fa-phone"></i></a></span>
                </button>
                <!-- Nav Search -->
                <div class="nav-search">
                  <form action="" class="nb-page-search sm-none">
                    <input type="search" id="nb_search" name="nb_search"/>
                    <label for="submit" class="nb-btn-style-2" id="nb-search-send"><i class="fa-solid fa-magnifying-glass"></i></label>
                    <!-- <input type="submit" id="submit"/> -->
                  </form>
                </div>
                <!-- Nav Search End -->
              </div>
              <!-- Hamburger -->
            
              <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>
                  <span class="toggler-bars"></span>
                </div>
              </button>
            </div>
            <!-- right Menu End -->
  
            
            <!-- </div> -->
            <!-- Hamburger End -->
  
            <!-- Moble Start -->
            <div class="nav-mobile-canvas"  id="nav-mobile-canvas">
              <nav class="nav-menu">
                <div class="nav-menu-wrap1">
                    <!--Nav logo mobile-->
                    <div class="nav-logo-mob">
                      <a href="https://nuitwebtek.com/navigation-bar-style-2/">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/11/vintage-logo.png" alt="" class="mob-logo-image" />
                         </a>
                    </div>
                    <!-- 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-2" id="nb-search-send"><i class="fa-solid fa-magnifying-glass"></i></label>
                      <!-- <input type="submit" id="submit"/> -->
                    </form>
                  </div>  
                  <!-- Nav Search End -->
                  <ul class="nav-list">
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Home</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">About</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Services</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Portfolio</a>
                    </li>
                    <li class="nav-items">
                      <a href="#" class="nb-item-link nb-btn-style-1 font-style-1">Contact Us</a>
                    </li>
                  </ul>
                </div>
                <div class="nav-menu-wrap2">
                  <div class="sm-social-contacts lg-none sm-block">
                    <a href="">
                      <span><i class="fa-brands fa-instagram"></i></span>
                    </a>
                    <a href="">
                      <span><i class="fa-brands fa-facebook"></i></span>
                    </a>
                    <span><a href="tel:+91 1234567891" class="nb-item-link font-style-1">+00000-00000</a></span>
                  </div>
                </div>
              </nav>
            </div>
            <!-- Moble End -->
          </div>
      </header>
      <!-- Header End -->

    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* remove .dummy-body from css while extracting */
.dummy-body {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    background: linear-gradient(#F3DCC6, #aa8f6c);
}
a{
    color: inherit;
}

/* Required CSS */

.nav1-header {
    background: #FDF6ED;
    position: absolute; /* Please change to 'fixed' after extracting. thank you. */
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 8px 11px 0px #3333338a;
    border-bottom: 3px solid #452222;
    
    .nav-menu ul {
        display: flex;
        list-style: none;
        padding: 0;
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .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-logo-image{
        position: relative;
        top: 40px;
          transform: scale(1.3);
    }
    .nav-search {
        margin-right: 1.5rem;
        display: flex;
        align-items: center;
    }

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

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

    /* Tab + Moblie */
    @media only screen and (max-width:1200px) {
        .nav-search {
            width: 92%;
            margin: auto;
            position: relative;
            top: -40px;
        }
        .nav-mobile-canvas {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 10%;
            background: #FDF6ED;
            display: grid;
            align-content: center;

            .nav-menu .nav-list {

                & li {
                    width: 100%;
                    padding: 5px 10px;
                    margin-block: 10px;
                }

                & li:last-child {
                    border-bottom: none;
                }
            }
        }
            .nav-wrap {
                width: 95%;
                margin: auto;
            }
    }
    /* Tab + Moblie End */


}
html {
  scroll-behavior: smooth;
}

.lg-none {
    display: none;
}

.font-style-1 {
    color: #fff;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500;
}

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

.nb-btn-style-1 {
    display: inline-flex;
    padding: 0px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid transparent;
    position: relative;
    margin-inline: 5px;
    color: #452222;
    transition: 0.5s;
    
}

.nb-btn-style-1:hover, .nb-btn-style-1:active{
   border-bottom: 3px solid #452222;
    color: inherit;
    text-decoration: none;
}
.nb-btn-style-2 {
    background: transparent;
    border: 1px solid transparent;
    font-size: 16px;
    color: #452222;
}

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

.nb-page-search input[name="nb_search"] {
    width: 100%;
    height: 100%;
    border: 1px solid #452222;
    outline: none;
    border-radius: 18px;
    padding-left: 10px;
    background: #f1f1f1b5;
}
#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;
}
.nav1-header .sm-contact{
    font-size: 16px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #452222;
}
.nav1-header .nav-row-right .sm-contact{
    margin-right: 18px;
    padding: 6px;
}
button.sm-contact.sm-none:hover::after, .nb-toggler.nb-collapsed.lg-none.sm-block:hover::after{
    width: 0%;
    opacity: 0;
}
  

@media only screen and (max-width:1200px) {
    #nb-search-send {
        left: 96%;
    }

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

    .sm-block {
        display: block;
    }
    .nb-search {
        padding: 0;
    }
    
    .nbbar-toggler-icon{
        position: relative;
        width: 25px;
        height: 26px;
        display: grid;
    }
    .nbbar-toggler-icon .toggler-bars{
        width: 100%;
        height: 3px;
        border-radius: 10px;
        background-color: #452222;
        transition: 0.6s ease-in;
    }
    .nbbar-toggler-icon span:nth-child(1){
        width: 5px;
        height: 5px;
        border-radius: 100%;
        margin: auto;
    }
    
    .navclose .nbbar-toggler-icon span:nth-child(1){
        opacity: 0;
    }
    .navclose .nbbar-toggler-icon span:nth-child(2){
        transform: rotate(-45deg);
    }
    .nbbar-toggler-icon span:nth-child(3){
        position: relative;
        top: 0px;
    }
    .navclose .nbbar-toggler-icon span:nth-child(3) {
        transform: rotate(45deg);
        top: -6px;
    }
    .navclose .nbbar-toggler-icon span:nth-child(4){
        opacity: 0;
    }
    .nb-btn-style-2 {
        left: 16px;
    }
    .nb-btn-style-2 #nb-search-open {
        left: 81%;
        position: absolute;
    }
    .nb-toggler {
        background: transparent;
        outline: none;
        border: none;
        position: relative;
        z-index: 2;
    }
    .nav-menu-wrap2{
        position: relative;
        bottom: -120px;
    }
    .sm-social-contacts {
    padding-bottom: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    
}
    .sm-social-contacts i,
    .sm-social-contacts a {
        color: #452222;
        font-size: 20px;
    }
    .nb-page-search{
        width: 100%;
    }
    .nav-mobile-canvas{
    transform: translateX(100%);
    transition:  0.5s ease-in ;
}
.navshow.nav-mobile-canvas {
    transform: translateX(-10%);
}
    .nav-logo-mob {
    position: relative;
    top: -80px;
    margin-inline: 15px;
}
}

@media only screen and (max-width:480px){
    #nb-search-send {
        left: 92%;
    }
    .font-style-1{
        font-size: 20px;
}
/* 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; }

JS

jQuery(document).ready(function(){
    
let body = document.querySelector('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')


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

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

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

Links

<!-- font-poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins: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">
    <!-- 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 2

Note:

HTML

CSS

JS

Links

Scripts