Header

        
<nav class="navbar navbar-expand-lg bg-blue global-header">
  <a class="navbar-brand" href="javascript:void(0)"><i class="icon-logo"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></a>
  <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>-->
  <div class="collapse navbar-collapse d-flex headerBar" id="navbarSupportedContent">
    <ul class="navbar-nav navbar-expand-sm">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="javascript:void(0)">Marketplace</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">My Storefront</a>
      </li>
    </ul>
    <form class="form-inline mx-auto">
      <div class="global-search active">
        <div class="security-dropdown dropdown">
          <a href="#" class="security-link" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown"><span class="link-text">All</span><i class="icon-arrow-bottom"  data-toggle="tooltip" data-placement="bottom" title="Product List"></i></a>
          <div class="dropdown-menu category-dropdown">
            <div class="scroll-div" >
              <a class="dropdown-item dropdown-title selected" href="javascript:void(0)">All</a>
              <a class="dropdown-item dropdown-title" href="javascript:void(0)">Home</a>
              <a class="dropdown-item dropdown-title" href="javascript:void(0)">Marketplace</a>
              <a class="dropdown-item dropdown-title" href="javascript:void(0)">My Storefront</a>
              <hr class="divider-line">
              <a class="dropdown-item dropdown-title" href="javascript:void(0)">Catalog Departments</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Accessories and Cables</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Appliances</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Audio / Video / Output Devices</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Computer Components</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Computers and Portables</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Digital Signage</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Drones</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Gaming</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Home Audio</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Monitor / Display / Projector</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Networking</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Office Machines and Supplies</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Photo</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Portable Electronics</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Power Equipment</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Printers</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Projectors</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Security</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Service / Support</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">Storage Devices</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">TV & Video</a>
              <a class="dropdown-item dept-item" href="javascript:void(0)">UCC/Mobility/Telecom</a>
            </div>
          </div>
        </div>
        <input type="text" placeholder="What are you looking for?" aria-label="Search" class="search-prod">
        <button class="search-btn" type="button"><i class="icon-cross headerCross" style="display: none;"></i> <i class="icon-cross headerCross icon-cross-clear" style="display: none;"></i><i class="icon-search headerSearch"></i> </button>
        <!--recent Items Flyout-->
        <div class="recent-items-flyout" style="display: none;">
          <div class="items-heading">Recent Searches <a class="float-right clear-filter" href="javascript:void(0);"><span>Clear History</span></a></div>
          <ul class="Items-listing list-unstyled">
            <li><i class="icon-timer"></i>Office 365<i class="icon-search-arrow"></i></li>
            <li><i class="icon-timer"></i>Anti Virus<i class="icon-search-arrow"></i></li>
            <li><i class="icon-timer"></i>Microsoft Azure<i class="icon-search-arrow"></i></li>
            <li><i class="icon-timer"></i>Cables Accessories<i class="icon-search-arrow"></i></li>
          </ul>
        </div>
        <!--recent Items Flyout End-->
        <!--no result Flyout-->
        <div class="no-result-flyout" style="display: none;">
          <div class="no-result-section mx-auto">
            <i class="icon-search"></i>
            <p class="no-result-text"><strong>Did you mean:</strong> “<span class="text-blue">Office 365</span>”? </p>
            <p class="no-content">No results containing <span>“Norton Antivirus”</span> were found.</p>
            <p class="text-grey">Try another keyword to refine your search.</p>
          </div>
        </div>
        <!--no result Flyout End-->
      </div>
    </form>
    <ul class="header-action-link list-unstyled top-rightnav-links ml-auto">
      <li class="help-dropdown dropdown dropdown-right"  data-toggle="tooltip" data-placement="bottom" title="Help">
        <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-help"></i></a>
        <div class="dropdown-menu" >
          <i class="icon-dropdown-arrow"></i>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-guided"></i> Guided Help</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-training"></i> Training Resources</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-phone"></i> Open Ticket</a>
          <a class="dropdown-item" href="v"><i class="icon-info"></i> About Synnex</a>
        </div>
      </li>
      <li class="country-dropdown dropdown dropdown-right" style="display: none;">
        <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-globe"></i><i class="icon-action-arrow"></i></a>
        <div class="dropdown-menu" >
          <i class="icon-dropdown-arrow"></i>
          <div class="country-name">
            <div class="flag-img">
              <img src="images/flag.png" />
            </div>
            <div class="change-link"><span>United States (USD)</span><a href="javascript:void(0)">Change</a></div>
          </div>
        </div>
      </li>
      <li class="notification-dropdown dropdown dropdown-right" data-toggle="tooltip" data-placement="bottom" title="Notification">
        <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="alert-icon"></span><i class="icon-alert"></i></a>
        <div class="dropdown-menu" >
          <i class="icon-dropdown-arrow"></i>
          <h2>Notifications  <a class="float-right view-all-link" href="javascript:void(0);"><span>Mark as Read</span></a></h2>
          <div class="scroll-content notifications-scroll">
            <div class="notification-content">
              <h4>Today</h4>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur elit nisl.</span>
                <span class="timeTxt">2 min ago</span>
              </div>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">1 hr ago</span>
              </div>
            </div>
            <div class="notification-content">
              <h4>Yesterday</h4>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">23 hrs ago</span>
              </div>
            </div>
            <div class="notification-content">
              <h4>14 Nov 2020</h4>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">23 hrs ago</span>
              </div>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">2 hrs ago</span>
              </div>
            </div>
            <div class="notification-content">
              <h4>14 Nov 2020</h4>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">23 hrs ago</span>
              </div>
              <div class="noti-col">
                <img src="images/notify-icon.png"/>
                <span class="noti-Txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend nisl.</span>
                <span class="timeTxt">2 hrs ago</span>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="user-dropdown dropdown dropdown-right" data-toggle="tooltip" data-placement="bottom" title="Account">
        <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="user-name-val">Richard</span> <i class="icon-action-arrow"></i></a>
        <div class="dropdown-menu" >
          <i class="icon-dropdown-arrow"></i>
          <div class="user-detail">
            <span class="userName">Richard Rose </span>
            <p>richard.rose@synnex.com</p>
          </div>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-user-setting"></i>Account Settings</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-company-info"></i>Company Info</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-manage"></i>Manage Subscriptions</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-accepted"></i>Accepted Agreements</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-payment"></i> Payment & Shipping</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-security"></i> Password & Security</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="icon-feedback"></i>Give Feedback</a>
          <a class="dropdown-item border-top log-out-link" href="javascript:void(0)"><i class="icon-logout"></i> Log Out</a>
        </div>
      </li>
      <li class="cart-main-link"><a class="cart-outer view-cart-details showEmpty"><i class="icon-cart" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="View Cart"></i>
        <span class="cartName" data-original-title="" style="display: block;">AlexDemo1209</span><i class="icon-edit" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit" style="display: block;"></i></a>
      </li>
    </ul>
  </div>
</nav>