Navbar

<!-- Header -->
 <header class="header header-light bg-white">
   <nav class="navbar flex-nowrap p-0">
     <div class="navbar-brand-wrapper col-auto">
       <!-- Logo For Mobile View -->
       <a class="navbar-brand navbar-brand-mobile" href="../../demo-crypto/dashboards/index.html">
         <img class="img-fluid w-100" src="../../assets/img/logo-mini.png" alt="Nova">
       </a>
       <!-- End Logo For Mobile View -->

       <!-- Logo For Desktop View -->
       <a class="navbar-brand navbar-brand-desktop" href="../../demo-crypto/dashboards/index.html">
         <img class="side-nav-show-on-closed" src="../../assets/img/logo-mini.png" alt="Nova" style="width: 41px; height: 33px;">
         <img class="side-nav-hide-on-closed" src="../../assets/img/logo.png" alt="Nova" style="width: 130px; height: 33px;">
       </a>
       <!-- End Logo For Desktop View -->
     </div>

     <div class="header-content col px-md-3 px-md-3">
       <div class="d-flex align-items-center">
         <!-- Header Search -->
         <div class="js-header-search position-relative"
              data-search-target="#headerSearchResults"
              data-search-mobile-invoker="#headerSearchMobileInvoker"
              data-search-form="#headerSearchForm"
              data-search-field="#headerSearchField"
              data-search-clear="#headerSearchResultsClear">
           <a id="headerSearchMobileInvoker" class="header-search-invoker header-invoker" href="#">
             <i class="nova-search"></i>
           </a>

           <form id="headerSearchForm" class="header-search input-group input-group-merge w-18_75rem w-md-22_5rem" action="#">
             <input id="headerSearchField" class="header-search-input form-control form-control-append-icon" type="text" placeholder="Search nova database">
             <div class="input-group-append-merge focus-hide">
               <i class="nova-search icon-text"></i>
             </div>
             <div class="input-group-append-merge focus-show">
               <span id="headerSearchResultsClear">
                 <i class="nova-close icon-text"></i>
               </span>
             </div>

             <div id="headerSearchResults" class="unfold unfold-light unfold-top unfold-centered position-absolute w-100 mt-3">
               <div class="border-bottom px-3 px-md-4 py-3">
                 <h6 class="font-weight-semi-bold mb-3">Projects</h6>

                 <ul class="list-unstyled mb-0">
                   <li class="mb-2">
                     <a class="link-dark" href="#">Technical delivery call</a>
                   </li>
                   <li class="mb-2">
                     <a class="link-dark" href="#">R&D meeting</a>
                   </li>
                   <li class="mb-2">
                     <a class="link-dark" href="#">Discuss campaign performance</a>
                   </li>
                   <li class="mb-0">
                     <a class="link-dark" href="#">SciFi Writing Group</a>
                   </li>
                 </ul>
               </div>

               <div class="border-bottom px-3 px-md-4 py-3">
                 <h6 class="font-weight-semi-bold mb-3">Projects</h6>

                 <ul class="list-unstyled mb-0">
                   <li class="mb-2">
                     <a class="link-dark media align-items-center" href="#">
                       <img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img4.jpg" width="40" alt="Image description">

                       <div class="media-body">
                         <h6 class="font-weight-semi-bold mb-0">Frances James</h6>
                       </div>
                     </a>
                   </li>
                   <li class="mb-2">
                     <a class="link-dark media align-items-center" href="#">
                       <img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img6.jpg" width="40" alt="Image description">

                       <div class="media-body">
                         <h6 class="font-weight-semi-bold mb-0">Susie Gibbs</h6>
                       </div>
                     </a>
                   </li>
                   <li class="mb-2">
                     <a class="link-dark media align-items-center" href="#">
                       <img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img12.jpg" width="40" alt="Image description">

                       <div class="media-body">
                         <h6 class="font-weight-semi-bold mb-0">Gertrude Ramsey</h6>
                       </div>
                     </a>
                   </li>
                 </ul>
               </div>

               <div class="px-3 px-md-4 py-3">
                 <a class="link" href="#">Show all (24) Results</a>
               </div>
             </div>
           </form>
         </div>
         <!-- End Header Search -->

         <!-- Header Dropdown -->
         <div class="dropdown ml-auto">
           <a id="messagesInvoker" class="header-invoker" href="#" aria-controls="messages" aria-haspopup="true" aria-expanded="false"
              data-unfold-event="click"
              data-unfold-target="#messages"
              data-unfold-type="css-animation"
              data-unfold-duration="300"
              data-unfold-animation-in="fadeIn"
              data-unfold-animation-out="fadeOut">
             <span class="indicator indicator-bordered indicator-top-right indicator-secondary rounded-circle"></span>
             <i class="nova-email"></i>
           </a>

           <div id="messages" class="dropdown-menu dropdown-menu-center py-0 mt-4 w-18_75rem w-md-22_5rem" aria-labelledby="messagesInvoker">
             <div class="card">
               <div class="card-header d-flex align-items-center border-bottom py-3">
                 <h5 class="mb-0">Messages</h5>
                 <a class="link small ml-auto" href="#">View All</a>
               </div>

               <div class="card-body p-0">
                 <div class="list-group list-group-flush">
                   <a class="list-group-item list-group-item-action" href="#">
                     <div class="media align-items-center">
                       <div class="position-relative d-none d-md-block mr-2">
                         <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-success rounded-circle"></span>
                         <img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image description">
                       </div>

                       <div class="media-body">
                         <div class="d-flex">
                           <h6 class="font-weight-semi-bold mb-0">Frances James</h6>
                           <small class="text-muted ml-auto">just now</small>
                         </div>

                         <p class="text-truncate mb-0" style="max-width: 250px;">
                           Reminder about your Appointment
                         </p>
                       </div>
                     </div>
                   </a>

                   <a class="list-group-item list-group-item-action" href="#">
                     <div class="media align-items-center">
                       <div class="position-relative d-none d-md-block mr-2">
                         <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-danger rounded-circle"></span>
                         <img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image description">
                       </div>

                       <div class="media-body">
                         <div class="d-flex">
                           <h6 class="font-weight-semi-bold mb-0">Chad Ward</h6>
                           <small class="text-muted ml-auto">an hour ago</small>
                         </div>

                         <p class="text-truncate mb-0" style="max-width: 250px;">
                           If you could have any kind of pet, what would you choose?
                         </p>
                       </div>
                     </div>
                   </a>

                   <a class="list-group-item list-group-item-action" href="#">
                     <div class="media align-items-center">
                       <div class="position-relative d-none d-md-block mr-2">
                         <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-warning rounded-circle"></span>
                         <img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img5.jpg" alt="Image description">
                       </div>

                       <div class="media-body">
                         <div class="d-flex">
                           <h6 class="font-weight-semi-bold mb-0">Carolyn Carlson</h6>
                           <small class="text-muted ml-auto">2 days ago</small>
                         </div>

                         <p class="text-truncate mb-0" style="max-width: 250px;">
                           I won $500 million in the lottery, I quit!
                         </p>
                       </div>
                     </div>
                   </a>

                   <a class="list-group-item list-group-item-action" href="#">
                     <div class="media align-items-center">
                       <div class="position-relative d-none d-md-block mr-2">
                         <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-success rounded-circle"></span>
                         <img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img6.jpg" alt="Image description">
                       </div>

                       <div class="media-body">
                         <div class="d-flex">
                           <h6 class="font-weight-semi-bold mb-0">Lizzie Barber</h6>
                           <small class="text-muted ml-auto">4 days ago</small>
                         </div>

                         <p class="text-truncate mb-0" style="max-width: 250px;">
                           Spring fever.
                         </p>
                       </div>
                     </div>
                   </a>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- End Header Dropdown -->

         <!-- Header User Dropdown -->
         <div class="dropdown mx-3">
           <a id="profileMenuInvoker" class="header-complex-invoker" href="#" aria-controls="profileMenu" aria-haspopup="true" aria-expanded="false"
              data-unfold-event="click"
              data-unfold-target="#profileMenu"
              data-unfold-type="css-animation"
              data-unfold-duration="300"
              data-unfold-animation-in="fadeIn"
              data-unfold-animation-out="fadeOut">
             <img class="avatar rounded-circle mr-md-2" src="../../assets/img/100x100/img9.jpg" alt="Image description">
             <span class="d-none d-md-block">David Walters</span>
             <i class="nova-angle-down d-none d-md-block ml-2"></i>
           </a>

           <ul id="profileMenu" class="unfold unfold-user unfold-light unfold-top unfold-centered position-absolute pt-2 pb-1 mt-4" aria-labelledby="profileMenuInvoker">
             <li class="unfold-item">
               <a class="unfold-link d-flex align-items-center text-nowrap" href="#">
                 <span class="unfold-item-icon mr-3">
                   <i class="nova-user"></i>
                 </span>
                 My Profile
               </a>
             </li>
             <li class="unfold-item">
               <a class="unfold-link d-flex align-items-center text-nowrap" href="#">
                 <span class="unfold-item-icon mr-3">
                   <i class="nova-cup"></i>
                 </span>
                 Upgrade Plan
               </a>
             </li>
             <li class="unfold-item">
               <a class="unfold-link d-flex align-items-center text-nowrap" href="#">
                 <span class="unfold-item-icon mr-3">
                   <i class="nova-folder"></i>
                 </span>
                 Latest Projects
               </a>
             </li>
             <li class="unfold-item">
               <a class="unfold-link d-flex align-items-center text-nowrap" href="#">
                 <span class="unfold-item-icon mr-3">
                   <i class="nova-book"></i>
                 </span>
                 Get Support
               </a>
             </li>
             <li class="unfold-item unfold-item-has-divider">
               <a class="unfold-link d-flex align-items-center text-nowrap" href="#">
                 <span class="unfold-item-icon mr-3">
                   <i class="nova-power-off"></i>
                 </span>
                 Sign Out
               </a>
             </li>
           </ul>
         </div>
         <!-- End Header User Dropdown -->
       </div>
     </div>
   </nav>
 </header>
 <!-- End Header -->

<!-- JS Nova -->
<script src="../../assets/js/hs.core.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.header-search.js"></script>

<script>
  $(document).on('ready', function () {
    // initialization header search component
    $.HSCore.components.HSHeaderSearch.init('.js-header-search');

    // initialization of dropdown component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      unfoldHideOnScroll: false,
    });
  });
</script>

<!-- Header -->
<header class="header header-light bg-white">
  <nav class="navbar flex-nowrap p-0">
    <div class="navbar-brand-wrapper col-auto">
      <!-- Logo For Mobile View -->
      <a class="navbar-brand navbar-brand-mobile" href="../../demo-crypto/dashboards/index.html">
        <img class="img-fluid w-100" src="../../assets/img/logo-mini.png" alt="Nova">
      </a>
      <!-- End Logo For Mobile View -->

      <!-- Logo For Desktop View -->
      <a class="navbar-brand navbar-brand-desktop" href="../../demo-crypto/dashboards/index.html">
        <img class="side-nav-show-on-closed" src="../../assets/img/logo-mini.png" alt="Nova" style="width: 41px; height: 33px;">
        <img class="side-nav-hide-on-closed" src="../../assets/img/logo.png" alt="Nova" style="width: 130px; height: 33px;">
      </a>
      <!-- End Logo For Desktop View -->
    </div>

    <div class="header-content col px-md-3 px-md-3">
      <div class="d-flex align-items-center">
        <!-- Info Sidebar Toggle -->
        <a id="activityInvoker" class="header-invoker ml-auto" href="#" aria-controls="activity" aria-haspopup="true" aria-expanded="false"
           data-unfold-event="click"
           data-unfold-target="#activity"
           data-unfold-type="css-animation"
           data-unfold-animation-in="fadeInRight"
           data-unfold-animation-out="fadeOutRight"
           data-unfold-duration="300">
          <i class="nova-align-right"></i>
        </a>
        <!-- End Info Sidebar Toggle -->

        <!-- Info Sidebar -->
        <div id="activity" class="js-custom-scroll sidebar sidebar-light sidebar-right sidebar-full-height unfold-css-animation unfold-hidden position-fixed" aria-labelledby="activityInvoker">
          <div class="border-bottom d-flex align-items-center text-nowrap px-3 px-md-4 py-3">
            <h5 class="mb-0">Activity</h5>
            <a id="activityClose" class="text-muted small ml-auto" href="#" aria-controls="activity" aria-haspopup="true" aria-expanded="false"
               data-unfold-event="click"
               data-unfold-target="#activity"
               data-unfold-type="css-animation"
               data-unfold-animation-in="fadeInRight"
               data-unfold-animation-out="fadeOutRight"
               data-unfold-duration="300">
              <i class="nova-close icon-text"></i>
            </a>
          </div>

          <!-- Info Sidebar Content Here -->
          <div class="p-2">
            <h2>Info Here</h2>
          </div>
          <!-- End Info Sidebar Content Here -->

        </div>
        <!-- End Info Sidebar -->
      </div>
    </div>
  </nav>
</header>
<!-- End Header -->

<!-- JS Nova -->
<script src="../../assets/js/hs.core.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>

 <script>
  $(document).on('ready', function () {
    // initialization of Unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      unfoldHideOnScroll: false,
    });
  });
</script>